Solved

CSS Media queries versus a PHP mobile detect script?

Posted on 2012-04-05
7
1,536 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 109

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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
LVL 109

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 109

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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