The web’s primary design principle is universality... it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. — Tim Berners-Lee
CSS: device-pixel-ratio • Pros – Downloads the right image based on pixel-ratio • Cons – No support for – High DPI device will download large image on Low Bandwidth connection – Multiple Image versions
Browser features • Srcset • Polyfill: https://github.com/borismus/srcset-polyfill/ No browser support yet. But its in the specs. http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ POLYFILL
window.matchMedia • Media Queries in JS https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media- queries-in-javascript/ SAFARI, CHROME, FIREFOX MOBILE
What if everyone has a HiDPI screen • Ultra High Definition (UHD) – 4k TVs – 8K - 7680×4320 Resolution • vw & vh units – 1 vw = 1/100 of viewport width • 2X the images everywhere ?
Physical Units ? • Very hard to distinguish between devices – iPad 2 and iPad Mini – Phone to 7’’ tablets – 7’’ tablet to 10’’ tablet • Elements across devices are not of the same physical size – Use ? • Safari/Chrome does not support @media screen and (min-resolution :320dpi)