Search code examples
cssresponsive-designmedia-queries

CSS Media Query that Covers Most Mobile Devices


Is there any CSS media query that is able to detect most smartphones, instead of having to declare each one individually?

*** I tried using the only screen specification, but it doesn't seem to do quite what I want it to.


Solution

  • I think you might be approaching this from the wrong angle. When doing responsive design you shouldn't be concerned with specific screen sizes of different devices, you'd go mad trying to code for all the exceptions.

    Just concern yourself with the layout of your page at various pixels widths. If the design looks good at 320px, bump it up a bit. How does it look at 480px? 640px? Are a couple DIVs not flowing properly? Is the heading font size way too big/small? Images need re-sizing? At these points is where you would insert a media query to adjust the layout and design of your page.

    As far as supplying a different stylesheet for mobile devices you would, and correct me if I'm wrong, have to sniff the UserAgent string and send the appropriate CSS file. This could be done from the server or client side. From my understanding this not ideal as you cannot rely too heavily on what will be contained in the UserAgent string as it changes over time. Using this method might get you a layout that was meant to be shown on a sub 480px width screen but appear on a larger tablet where you might actually prefer the desktop layout to be used or a layout designed for use in the 480px to 960px range.

    You could look into Adaptive Design, though this does not sound like what you're doing. In Adaptive Design you might detect the device (width/type/etc) the user is on and send them a different web page all together. Not the same page with the layout re-tooled. A major airline does this (cannot remember who, KLM?) for their mobile users. They found that a large majority of their users weren't purchasing tickets when accessing their website via mobile rather they were managing their upcoming/current flights - check-in, flight status etc. So they deliver a webpage that focuses on those features and information and their desktop site is more geared towards sales.

    As far as high definition screens go there is a difference between device pixels and CSS pixels (aka Device Independent Pixels?). eg, my Samsung Galaxy S4 has 1080x1920 device pixels, though it's CSS pixels is 360x640. CSS pixels is what the browser on a mobile device will use to render the page. Though that will depend on what you set in your viewport meta tag. Here's a link on how some of what I just mentioned works - https://developers.google.com/speed/docs/insights/ConfigureViewport. There's also this handy little site to help you determine the various pixel settings, their ratios etc. - http://mydevice.io/.