Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Media queries versus a PHP mobile detect script?

Posted on 2012-04-05
7
Medium Priority
?
1,687 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 111

Accepted Solution

by:
Ray Paseur earned 1000 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 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 1000 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 1000 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 111

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
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 how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

971 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