Solved

CSS Media queries versus a PHP mobile detect script?

Posted on 2012-04-05
7
1,488 Views
Last Modified: 2012-04-06
Hi,
I have one website that will be used for all devices, desktops, tablets & mobile devices.
Only the css will be modified to hide or override existing styles when tablets or mobile devices are used.

Is it better to use media queries as shown below to include additional style sheets for tablet and mobile devices and specify display:none for the elements I wish to hide in the mobile and tablet forms and override styles for the tablet and mobile forms?


<link href="/styles/desktop.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="/styles/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 768px)" />
<link href="/styles/mobile.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />


Or should I just use a  php mobile detect script such as http://code.google.com/p/php-mobile-detect/downloads/list and load just one css file?


<?php  require_once 'Mobile_Detect.php';
       $detect = new Mobile_Detect();
       $layout = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop');
?>
           
<link href="/styles/<?php echo $layout; ?>.css" rel="stylesheet" type="text/css" media="screen, projection" />

What are the pros and cons of either choice

Thanks in advance for your feedback.
0
Comment
Question by:sabecs
  • 3
  • 2
  • 2
7 Comments
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 37811707
One advantage of the Mobile_Detect() approach is that your server will be sending less data to the device.
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 250 total points
ID: 37811743
Standards would have you use the CSS media queries.  Which may save development time/overhead and server cost.  The browser will be responsible for rendering the elements through the media query. If you use PHP, obviously the server will be responsible for the detection.

What would you be more comfortable maintaining over time? I personally use media queries for several different reasons. The main one is that I'm a front-end guy who'd rather not mess around with PHP if I had a choice. I have used both and CSS is far easier/better IMHO.
0
 

Author Comment

by:sabecs
ID: 37816294
I previously had my style sheets split into smaller manageable files such as main.css, menu.css, products.css, gallery.css etc which made things easy to find and alter styles. If I use media queries I will have to combine into one large file such as desktop.css which will make it was more difficult to locate a specify style?

Are there any other disadvantages to using a PHP detection script?
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 37816323
The process of taking smaller manageable files and combining them into one large file is something you can automate.  In computer science it's called a "build" and a one-click build is a really useful tool for speeding up your testing.  Just a thought, ~Ray
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 250 total points
ID: 37816547
You could just add the media queries to each file for that specific css.  But, I do agree with Ray, in that you could "build" the files on the fly.  

Just to reinforce the media queries though, when your doing them you may not need to include all of your styles.  Remember, it's more about usability and user experience then anything else.
0
 

Author Closing Comment

by:sabecs
ID: 37816978
Thanks for your comments, much appreciated..
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 37817647
Thanks for the points - there is always more than one way to skin a cat, and this is a great question!  Best, ~Ray
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now