Future proof Media Query for high resolution devices

[webbower]

https://github.com/h5bp/mobile-boilerplate/blob/master/css/main.css#L216

This media query is not future proofed. Various resources have established what the actual spec will be for determining a device's pixel density:

• http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
• http://dev.w3.org/csswg/mediaqueries4/#resolution

So the media query should probably be:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5), /* Not sure if this is obsolete since the future is "resolution" */
       only screen and (min-resolution: <value>) {
    /* Style adjustments for viewports that meet the condition */
}

I'm not 100% sure what <value> should be, but the allowed unit types are outlined http://www.w3.org/TR/2012/WD-css3-values-20120308/#resolution

[necolas]

Thanks, please see #73 for the existing issue and discussion about this.