Solved

CSS Media queries versus a PHP mobile detect script?

Posted on 2012-04-05
7
1,507 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 …
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

914 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

13 Experts available now in Live!

Get 1:1 Help Now