CSS Media queries versus a PHP mobile detect script?

Posted on 2012-04-05
Last Modified: 2012-04-06
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 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.
Question by:sabecs
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
LVL 110

Accepted Solution

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.
LVL 30

Assisted Solution

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.

Author Comment

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?
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

LVL 110

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
LVL 30

Assisted Solution

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.

Author Closing Comment

ID: 37816978
Thanks for your comments, much appreciated..
LVL 110

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
splitting a sting into elements 6 75
What is the best SEO Web Analytics tool/program 3 60
PDF Turn Look 7 36
drop down menu blocks search boxes 4 23
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

751 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