Avatar billede mbs- Nybegynder
30. juli 2012 - 14:44 Der er 8 kommentarer og
1 løsning

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/spm/963632 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
Avatar billede claes57 Ekspert
30. juli 2012 - 15:06 #1
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');
?>
Avatar billede mbs- Nybegynder
30. juli 2012 - 15:51 #2
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
Avatar billede swiatecki Novice
30. juli 2012 - 15:56 #3
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.
Avatar billede olsensweb.dk Ekspert
30. juli 2012 - 16:02 #4
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/manual/en/function.get-browser.php ?? se notes,  understøtter det 32/64 bit på OS ??


ref http://www.useragentstring.com/pages/useragentstring.php

Android:  kig på http://www.useragentstring.com/pages/Android%20Webkit%20Browser/, og se dens useragent
Apple tablets: bruger vel opera http://www.useragentstring.com/pages/Opera%20Mobile/ eller opera mini http://www.useragentstring.com/pages/Opera%20Mini/ tror jeg mere på, sjovt der ikke er safari til mobile på apple platformen
mobiltelefoner: kig på http://www.useragentstring.com/pages/IE%20Mobile/, 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/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/
Credits: This is a php port from Rafael Lima's original Javascript CSS Browser Selector: http://rafael.adm.br/css_browser_selector
*/

    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/11/programming/user-agents-%E2%80%93-php-snippet-added-to-get-browser-info/        
            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/questions/10966/how-can-i-tell-whether-my-firefox-is-32-bit-or-64-bit
            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
Avatar billede mbs- Nybegynder
30. juli 2012 - 16:19 #5
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' />";?>
Avatar billede mbs- Nybegynder
30. juli 2012 - 16:24 #6
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/od/learnphp/p/http_user_agent.htm"
Avatar billede mbs- Nybegynder
20. september 2012 - 18:03 #7
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 :)
Avatar billede olsensweb.dk Ekspert
20. september 2012 - 19:25 #8
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 ??
Avatar billede mbs- Nybegynder
21. september 2012 - 08:22 #9
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.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester