Oprettet man. d. 30. juli 2012 kl. 14:44:57

mbs-
mbs- (8.270 point. Point ude: 550)
www.surfsmart.dk

Definere stylesheet til mobiler og tablets

Hej Eksperten.

Jeg har et rimelig stort problem som jeg håber der er en der kan hjælpe med. Det hele kan faktisk kobles sammen til en anden tråd jeg havde kørende her på Eksperten. Her var "ronols" til stor hjælp, men han har måtte smide håndklædet - Selvom han som sagt har været til STOR hjælp!

Problemet opstår når jeg vil se mit site i Android og/eller Apple tablets og mobiltelefoner - Så er der en smule forskel i placeringen af de forskellige divs, og lidt med skrifttypen.

Det har jeg kunne afhjælpe ved hjælp af et css_browser_selector script som tager udgangspunkt i noget PHP server side script. Noget jeg desværre ikke har det store kendskab til, men har fundet mig frem til via. den store motorvej (Google) - og jaså selvfølgelig fået en del hjælp her på siden.

Desværre så kan det ikke definere hvilken css fil den skal hive fat i på alle platforme. Jeg har held med alle de gængse typer, såsom Win7, Winxp, Linux og mac. Alt sammen med henholdsvis 32/64 bit - Men når det kommer til tablets/telefoner bliver det lidt anderledes. Desværre!

Henviser til denne tråd http://www.eksperten.dk/ (...) hvor det hele startede.

Har tidligere snakket med ejeren af det webhotel jeg er på, og han siger faktisk at der allerede er et server side script implanteret på hotellet, men hvordan jeg gør brug af det, er jeg lidt i tvivl om. Som sagt, så har jeg fundet det script jeg bruger lige nu, på det store net.

Håber på der er en der kan dreje dette. Vil meget gerne jeg ku angive et separat css til f.eks. Android enheder, og et andet til Apple enheder (med tablet/mobiltelefon forskel, hvis der er det)

Vil gerne betale hvad det måtte koste for at fixe dette. Det skal selvfølgelig være således at der kan redigeres i det eksisterende script.

Håber på forståelse.

Fortsat god sommer (..den er sku nok egentlig væk for i år)

Mvh. Michael Bay Sørensen

Skrevet man. d. 30. juli 2012 kl. 15:06:42| #1

claes57
claes57 (36.601 point)
på web10 har de denne kode, som indsættes i start på index.php - sidste linje rettes til, så den bare indlæser din mobile css-kode i stedet.

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
header('Location: http://mobile.yoursite.com');
?>

Skrevet man. d. 30. juli 2012 kl. 15:51:01| #2

mbs-
mbs- (8.270 point)
www.surfsmart.dk
Det ser ikke rigtig ud til at virke.
Dog er det heller ikke Web10, men derimod http://www.dmerhverv.dk jeg har et hotel hos. Deres kontrol panel, er cPanel.

Jeg har prøvet og lavet en fil der hedder mobile.css som jeg så har angivet en font-size på 100 - Hvis det virkede, ville jeg tydeligt kunne se det.

Fejlen på min Nokia N900:
Warning: Cannot modify header information - headers already sent by (output started at.....

På min Nokia N9 viser den blot siden, uden nogen fejlmelding og ikke ændringer i css

Det skal jo også lige siges at jeg allerede har et server side script kørende i index.php - kan det være derfor?

Ydermere vil jeg jo gerne kunne definere anderledes i forhold til hvilken enhed det er. F.eks. så er der en smule forskel på hvordan siden bliver vist på min Nokia N900 (som kører Maemo) og i forhold til N9 (som kører Meego) - Jeg er sikker på det også gør sig gældende ved Apple/Android

Skrevet man. d. 30. juli 2012 kl. 15:56:51| #3

swiatecki
swiatecki (28.004 point)
mbs-: Det er lige meget hvor du er hosted henne...

Prøv at vise os din kode?  - Det ser ud til at du ikke har smidt det øverst i dit output.

Skrevet man. d. 30. juli 2012 kl. 16:02:13| #4

ronols
ronols (24.861 point)
olsensweb.dk/
Har tidligere snakket med ejeren af det webhotel jeg er på, og han siger faktisk at der allerede er et server side script implanteret på hotellet, men hvordan jeg gør brug af det, er jeg lidt i tvivl om.
det er vel ikke denne http://dk.php.net/ (...) ?? se notes,  understøtter det 32/64 bit på OS ??


ref http://www.useragentstring.com/ (...)

Android:  kig på http://www.useragentstring.com/ (...), og se dens useragent
Apple tablets: bruger vel opera http://www.useragentstring.com/ (...) eller opera mini http://www.useragentstring.com/ (...) tror jeg mere på, sjovt der ikke er safari til mobile på apple platformen
mobiltelefoner: kig på http://www.useragentstring.com/ (...), kunne også være android,


du kunne jo retunerer en BROWSERTYPE, og er det mobile kigger du på OS.

(utested)
<?php
/*
PHP CSS Browser Selector v0.0.1
Bastian Allgeier (http://bastian-allgeier.de)
http://bastian-allgeier.de/ (...)
License: http://creativecommons.org/ (...)
Credits: This is a php port from Rafael Lima's original Javascript CSS Browser Selector: http://rafael.adm.br/ (...)
*/

    function css_browser_selector($ua=null) {
        $ua = ($ua) ? $ua : $_SERVER['HTTP_USER_AGENT'];       
        $ua = strtolower($ua);
        $g = 'gecko';
        8$w = 'webkit';
        $s = 'safari';
        $ff = 'firefox';
        $b = array();

        $browser="";
        $browserversion="unknown";
        $browsertype = "unknown";
        $os="";
        $osversion="unknown";
        $bits=16;       
       
        // platform               
        if(strstr($ua, 'j2me')) { // kunne dette være apple mobile (opera mini)
                $os = 'mobile';   
                $browsertype = "mobile";
        } else if(strstr($ua, 'android')) {
                $os = 'android';
                $browsertype = "mobile";
        } else if(strstr($ua, 'iphone')) {
                $os = 'iphone';       
                $browsertype = "mobile";
        } else if(strstr($ua, 'ipod')) {
                $os = 'ipod';       
                $browsertype = "mobile";
        } else if(strstr($ua, 'mac')) { // dette er apple
                $os = 'mac';
                $browsertype = "browser";
        } else if(strstr($ua, 'darwin')) {
                $os = 'mac';       
                $browsertype = "browser";
        } else if(strstr($ua, 'webtv')) {
                $os = 'webtv';       
        } else if(strstr($ua, 'win')) {
                $os = 'win';       
                $browsertype = "browser";
        } else if(strstr($ua, 'freebsd')) {
                $os = 'freebsd';       
        } else if(strstr($ua, 'x11') || strstr($ua, 'linux')) {
                $os = 'linux';       
                $browsertype = "browser";
        }

       
        // browser
        if(!preg_match('/opera|webtv/i', $ua) && preg_match('/msie\s(\d)/', $ua, $array)) {
                $browser = 'ie'; $browserversion=$array[1];               
        }
       
        else if(preg_match('/firefox\/(\d+)/', $ua, $array)) {       
            $browser = $ff; $browserversion=$array[1];
        }
        else if(strstr($ua, 'gecko/')) {               
            $browser = $g;               
        }
        else if(preg_match('/opera(\s|\/)(\d+)/', $ua, $array)) {               
            $browser = 'opera'; $$browserversion=$array[2];
        }
        else if(strstr($ua, 'konqueror')) {
            $browser = 'konqueror';
        }
        else if(strstr($ua, 'chrome')) {
            $browser = $w . ' ' . $s . ' chrome';               
        }
        else if(strstr($ua, 'iron')) {
            $browser = $w . ' ' . $s . ' iron';
        }
        else if(strstr($ua, 'applewebkit/')) {               
            $tmp = (preg_match('/version\/(\d+)/i', $ua, $array)) ? 1 : 0;
            if($tmp){
                $browser = $w . ' ' . $s . ' ' . $s;
                $browserversion=$array[1];
            }
            else{
                $browser = $w . ' ' . $s;                
            }               
        }
        else if(strstr($ua, 'mozilla/')) {
                $browser = $g;
        }
       
        switch($os){
            // denne ser spændende ud, se specielt på php coden
            // http://www.peacemax.com/ (...)        
            case 'win': $bits = ( (stripos($ua, "WOW64")) || (stripos($ua, "Win64")) )? 64 : 32;
           
            if((stripos($ua,"Windows NT 6.1")) || (stripos($ua,"WinNT6.1"))) {$osversion = "system_7";}
            elseif ((stripos($ua,"Windows NT 6.0")) || (stripos($ua,"WinNT6.0"))) {$osversion = "vista";}
            elseif ((stripos($ua,"Windows NT 5.2")) || (stripos($ua,"WinNT5.2"))) {$osversion = ".net_2003";}
            elseif ((stripos($ua,"Windows NT 5.1")) || (stripos($ua,"WinNT5.1")) || (stripos($ua,"Windows XP"))) {$osversion = "xp";}
            elseif ((stripos($ua,"Windows NT 5.0")) || (stripos($ua,"WinNT5.0")) || (stripos($ua,"Windows 2000")) || (stripos($ua,"Win2000"))) {$osversion = "2000";}
            elseif ((stripos($ua,"Windows NT")) || (stripos($ua,"WinNT"))) {$osversion = "nt";}
           
            break;
            // http://askubuntu.com/ (...)
            case 'linux': $bits = (stripos($ua, "x86_64"))? 64 : 32; break;           
            default : $bits = 16; break;       
        }
       
        $b['browser']=$browser;
        $b['browserversion']=$browserversion;
        $b['browsertype']=$browsertype;
        $b['bits']=$bits;       
        $b['os']=$os;       
        $b['osversion']=$osversion;               
        return $b;       
    }
?>



#2
[i]Fejlen på min Nokia N900:
Warning: Cannot modify header information - headers already sent by (output started at.....[i]
du har sendt noget til skærmen før du redirecter, kunne være et mellemrun før <?php, BOM karakter, eller andet HTML code

Skrevet man. d. 30. juli 2012 kl. 16:19:53| #5

mbs-
mbs- (8.270 point)
www.surfsmart.dk
Det her har jeg som det øverste i index.php

<?php
    if(isset($_GET["source"])) { highlight_file(__FILE__); exit; } // denne linje gør at man kan se source code
    include "css_browser_selector_modif.php";
   
    // $ua = "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)";
    // $ua = "Mozilla/5.0 (X11; Linux i686) AppleWebKit/535.21 (KHTML, like Gecko) Chrome/19.0.1041.0 Safari/535.21";
    // $ua = "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:14.0) Gecko/20120405 Firefox/14.0a1";
    // $ua = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.21 (KHTML, like Gecko) Chrome/19.0.1042.0 Safari/535.21";
    // $browserstr=css_browser_selector($ua);
   
    $browserstr=css_browser_selector();   
    // print_r($browserstr);
   
    $browser=$browserstr['browser'];
    $os=$browserstr['os'];
   
?>

<!DOCTYPE html>
<html lang="da" class="<?php echo css_browser_selector() ?>">

Dernæst for at definere hvilken css fil jeg skal bruge
<?php echo "<link type='text/css' href='css/".$browserstr['browser'].$browserstr['bits'].'-'.$os.'-'.$browserstr['osversion'].".css' rel='stylesheet' media='screen' />";?>

Skrevet man. d. 30. juli 2012 kl. 16:24:18| #6

mbs-
mbs- (8.270 point)
www.surfsmart.dk
ronols - Det her er hvad jeg fik af vide af min udbyder

"Hej Michael,

Ja, det er såmænd ret simpelt. Der er ikke et decideret "script", men funktioner både i html, javascript og php, der kan oplyse dig om, hvilken browser brugeren bruger, og gøre noget bestemt herudfra. Læs f.eks.:

http://php.about.com/ (...)

Skrevet tor. d. 20. september 2012 kl. 18:03:04| #7

mbs-
mbs- (8.270 point)
www.surfsmart.dk
Jeg har egentlig fået løst problemet af mig selv. Men jeg takker nu mange gange ronols for hans tid, så hvis han er her - så smid et svar :)

Skrevet tor. d. 20. september 2012 kl. 19:25:53| #8

ronols
ronols (24.861 point)
olsensweb.dk/
jo jeg er stadig lidt med her på E, men bruger primært tid på udvikleren.dk, de har en klart bedre code håndtering
hvad blev løsningen ??

Skrevet fre. d. 21. september 2012 kl. 08:22:01| #9

mbs-
mbs- (8.270 point)
www.surfsmart.dk
Jeg fik flyttet det over i en WordPress theme, også gik jeg ellers igang med at ryde op og teste helt vild. Lige pludelig knækkede jeg nøden, så nu har jeg gjort siderne til mobiler mindre i "width" og andre små ting. Minimal kodning i php css selector scriptet. Alt er godt.

Ja personligt bruger jeg også lidt tid på Udvikleren.dk - ellers er der jo også den store side Amino. Der er der også til tider nogle freelance jobs, og andre opgaver.

Mvh.

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   


Seneste spørgsmål

Timestamp på dansk

Oprettet den 22. april 2013 kl. 14.44
mbs- giver 150 point for svar | Giv et svar »

Enkelt CMS i PHP og MYSQL

Oprettet den 15. april 2013 kl. 14.02
loumann giver 30 point for svar | Giv et svar »

PHP Galleri hjælp til programmering

Oprettet den 26. februar 2013 kl. 17.52
phpnoob giver 200 point for svar | Giv et svar »








Tips & Tricks fra PC World

Teaser billede

Her er seks Google Labs-funktioner, som du skal slå til med det samme

Gmail Labs giver dig adgang til en masse smarte funktioner, som Googles ingeniører leger med i øjeblikket.


Anmeldelser fra PC World

Teaser billede

Test: Samsung Galaxy S4 er et hit - trods gøglertricks

Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Tre smarte trick som gør Windows 8 bedre

Boot direkte til skrivebordet, få en strategisk godt placeret luk-knap og slip for at logge ind. Her er tre tips til Windows 8, som gør det nemmere at blive venner med styresystemet.


Nyheder fra Computerworld

Teaser billede

De 21 værste it-vaner - og hvordan du bryder dem

Du har helt sikkert en af disse dårlige it-vaner. Se her hvad du kan gøre.


IT Kurser
Samarbejdspartnere

Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger