Search code examples
mobileresponsive-designmedia-queriesscreen-resolution

Correct queries for screen widths and device resolutions

Perhaps someone can shed some light on something for me.

I'm basically trying to make sense of this device dimension list in terms of how to properly set up queries as well as maybe even detecting for and loading resources via javascript. http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

What's mostly throwing me off are the devices with very high PPI like retina Iphones and ipads.

As an example 1st and 2nd Gen iPads have a resolution of 768 x 1024 in portrait. So does the new iPad Mini. So assuming the query are only using, say min-width-768, it's going to load the exact same CSS for each device even though the Mini is smaller, right?

The iPad 3 has a portrait of 1536 x 2048. So using only min-width queries is this device going to get served up basically a large browser layout? Does the scale factor in the meta viewport tag play a role? Do the queries need to take into account pixel-aspect-ratio as well to correctly serve styles to high res devices?

Anybody have a setup that has worked well for the sea of device resolutions out there?

Solution

  • Your questions are very well thought out.

    These days devices are reporting device pixel widths that are not accurate. Pixels don't mean pixels anymore, the iPad mini for example is 40% smaller than an actual iPad but it reports a width of the regular size one. Plus retina devices are 2 mega pixels. Using px based media queries will result in very, very small designs on these devices.

    What I did to avoid this is to use em based media queries. Then only use percentages on containers (or ems). EMS on media queries are based on 16px. You can use pixels on font sizes or use REM with a px fallback (if you need to support ie 8). Respond.js (for ie8) supports ems.

    As far as when to bring on JS for different devices, base your width on ems explicitly (it defaults to px). I personally try to use the same scripts for all sizes OR I use a php class and server side stuff to load specifically for phones and not for desktops and so forth OR I detect touch and no-touch (see below).

    I have taken the Bootstrap 3 LESS files, changed the variables to make the grid use percentages for the gutter and all media are ems. All fonts are REMS with a px fallback. The html base font size has been changed to 100%. The framework is out of the box mobile first and fluid (except for the huge gutter which I changed in the variables). It has issues with the typography which are easily corrected. I also removed all .container classes and only use a single .container styled with a max-width and min-width and no more than 90% of the screen.

    These are based on Bootstrap's Variables but essentially when you use percentages on all your containers and ems on your media queries and fluid design techniques and mobile first css, you are covering the gamut of devices.

    These are the ems I target with excellent results on all devices because it's the viewport and not pixels:

    // Extra small screen / phone
@screen-xs-min: 480px;
@screen-xs-min: 30.000em;

// Small screen / tablet
@screen-sm-min: 768px;
@screen-sm-min: 48.000em;

// Medium screen / desktop   
@screen-md-min: 992px;
@screen-md-min: 62.000em;

// Large screen / wide desktop
@screen-lg-min: 1200px;
@screen-lg-min: 75.000em;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (47.938em);
@screen-sm-max: (61.938em);
@screen-md-max: (74.938em);

    Detecting features not devices

    Using a small script I detect touch and no-touch and load or not load my scripts this way:

     /* __________________ Supports Touch __________________*/
 /* Detects touch support and adds appropriate classes to html and returns a JS object
 *  Copyright (c) 2013 Izilla Partners Pty Ltd
 *  http://www.izilla.com.au
 *  Licensed under the MIT license
 *  https://coderwall.com/p/egbgdw
 */
var html = document.documentElement,
   supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

if (supportsTouch)
   html.className += ' touch';
else
   html.className += ' no-touch';
}

    EXAMPLE

     if( $("html").hasClass("no-touch") ) { 

  $(document).ready(function () {
    $('a[href^=tel]').css('pointer-events', 'none');
  });

 } // end turn off pointer events

    I use Modernizer in the same way, if a browser supports certain features or does not support features, I use that to load scripts or not load them as well as to create fallbacks for CSS.