[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 397
  • Last Modified:

mobile site version by changing css

I Want to create a mobile version of my php website I want to just change the style sheet of the website for the mobile version when I detect a mobile USER AGENT I want to include a different style sheet is there anyway to do it in php?
0
Nura111
Asked:
Nura111
  • 7
  • 6
  • 5
  • +1
3 Solutions
 
re-searcherCommented:
yes, it's possible if you're using template engine like smarty or your own template.

you can get user agent with following code:
$agent = $_SERVER['HTTP_USER_AGENT']

Open in new window


here is sample for checking Mozilla browser:
if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){
     /// using custom css
    echo 'mozilla.css';
}

Open in new window


I recommend which you read this article (it's contain mobile user-agents):
http://www.zytrax.com/tech/web/mobile_ids.html

I hope it's be useful.
0
 
re-searcherCommented:
this function will check mobile agent:
function check_mobile_agent()
{
    $_SERVER['ALL_HTTP'] = isset($_SERVER['ALL_HTTP']) ? $_SERVER['ALL_HTTP'] : '';
 
    $mobile_browser = '0';
 
    $agent = strtolower($_SERVER['HTTP_USER_AGENT']);
 
    if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|iphone|ipad|ipod|android|xoom)/i', $agent))
        $mobile_browser++;
 
    if((isset($_SERVER['HTTP_ACCEPT'])) and (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') !== false))
        $mobile_browser++;
 
    if(isset($_SERVER['HTTP_X_WAP_PROFILE']))
        $mobile_browser++;
 
    if(isset($_SERVER['HTTP_PROFILE']))
        $mobile_browser++;
 
    $mobile_ua = substr($agent,0,4);
    $mobile_agents = array(
                        'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
                        'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
                        'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
                        'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
                        'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
                        'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
                        'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
                        'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
                        'wapr','webc','winw','xda','xda-'
                        );
 
    if(in_array($mobile_ua, $mobile_agents))
        $mobile_browser++;
 
    if(strpos(strtolower($_SERVER['ALL_HTTP']), 'operamini') !== false)
        $mobile_browser++;
 
    // Pre-final check to reset everything if the user is on Windows
    if(strpos($agent, 'windows') !== false)
        $mobile_browser=0;
 
    // But WP7 is also Windows, with a slightly different characteristic
    if(strpos($agent, 'windows phone') !== false)
        $mobile_browser++;
 
    if($mobile_browser>0)
        return true;
    else
        return false;
}

Open in new window


replace following code with your css line:
$mobile_agent = check_mobile_agent();
 
if($mobile_agent === true){
     // echo mobile css
     echo 'path/to/mobile.css';
}else{
   // echo wide css
  echo 'path/to/pc.css';
}

Open in new window

0
 
amiguraCommented:
just adding these to html header normally work

 <link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>
 <link rel="stylesheet" type="text/css" href="mobile.css" media="screen"/>
0
 The Evil-ution of Network Security Threats

What are the hacks that forever changed the security industry? To answer that question, we created an exciting new eBook that takes you on a trip through hacking history. It explores the top hacks from the 80s to 2010s, why they mattered, and how the security industry responded.

 
Ray PaseurCommented:
I have not tested this, but it looks like it could detect the agent.  
http://mobiforge.com/developing/story/lightweight-device-detection-php

However I like the suggestion from amigura (but see my slight modification below).  The browser should know whether to use the handheld or screen CSS.  You might also want think about having a CSS for print.
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>
 <link rel="stylesheet" type="text/css" href="standardDeskTop.css" media="screen"/>

Open in new window

0
 
Nura111Author Commented:
Thank you all for the help a few question:
A. just to make sure there is nothing to do about the inline style right?
B. does eching the css is basically the same as using the <link rel  ?
0
 
Ray PaseurCommented:
You can put style sheet information into the HTML inline.  I like to do this when testing because the browser does not cache the inline style.
0
 
Nura111Author Commented:
I mean as for the style information that are inline  I cant change it in the mobile version throw the style sheet right?
0
 
re-searcherCommented:
Nura,

you can do everythings when you detect you visitor are from which agent, mobile or pc browser.

standard page should not contain in-line styles. it's better you put all of them into an css file and then do like steps which i told you in my previous post.
0
 
Nura111Author Commented:
what id the media="handheld and media=screen for?
0
 
Ray PaseurCommented:
This explains media types
http://www.w3.org/TR/CSS2/media.html
0
 
Nura111Author Commented:
Is xsly has anything to do with what im trying to do?
0
 
Nura111Author Commented:
XSLT
0
 
re-searcherCommented:
Can i ask what exactly you need?

XSLT is for transforming XML documents into XHTML documents or to other XML documents.
 07fig01.gif
0
 
Nura111Author Commented:
I need to optimize my website to mobile
0
 
re-searcherCommented:
best way is using specified template for each mobile version like symbian, iphone, blackberry.

read this article -> http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

best way for optimization is optimize your css and images and html contents.
+ decrease size of pictures with php image resizer class
+ use short code instead of normal codes in css. i.e instead of #FFFFFF use #FFF
+ for best and professional appearance you should specify custom template for each mobile version, one of best solutions for this is Smarty Template Engine or another template engines.
+ test your template with adobe live browser
0
 
Ray PaseurCommented:
To anyone who happens across the assisted solution at ID:36973392, note that the href= values should almost certainly be different if you want to have different CSS for the desktop and the mobile device.  The correct example of the code is shown in the code snippet at ID:36973444.
0
 
Nura111Author Commented:
Oh sorry I chose the wrong one Can I change it somehow?
0
 
re-searcherCommented:
i think nope, it's not possible for you.
just moderators can change this.
0

Featured Post

Fill in the form and get your FREE NFR key NOW!

Veeam is happy to provide a FREE NFR server license to certified engineers, trainers, and bloggers.  It allows for the non‑production use of Veeam Agent for Microsoft Windows. This license is valid for five workstations and two servers.

  • 7
  • 6
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now