A set of simple HTML pages with various viewport and media query settings, for educational purposes
Failed to load latest commit information.
.htaccess
LICENSE.txt
README.md
atviewport-mq.html
atviewport.html
index.html Added extra device-pixel-ratio examples Jul 11, 2012
meta-heightdeviceheight.html
meta-initialscale05.html
meta-initialscale1.html Clean up the HTML a bit by removing optional attributes/values Jul 10, 2012
meta-initialscale2.html
meta-width320.html
meta-width480.html
meta-width640.html
meta-widthdevicewidth-devicepixelratio15.html
meta-widthdevicewidth-devicepixelratio2.html
meta-widthdevicewidth-devicepixelratio225.html Added extra device-pixel-ratio examples Jul 11, 2012
meta-widthdevicewidth-div600.html
meta-widthdevicewidth-initialscale1-div600.html
meta-widthdevicewidth-initialscale1.html
meta-widthdevicewidth-maximumscale2.html
meta-widthdevicewidth-minimumscale05.html
meta-widthdevicewidth-targetdensitydpidevicedpi.html Clean up the HTML a bit by removing optional attributes/values Jul 10, 2012
meta-widthdevicewidth-userscalableno.html
meta-widthdevicewidth-withimage.html
meta-widthdevicewidth.html
noviewport.html
odevrel130.png
odevrel260.png
pixel-grid.png
report.js
style.css Added index.html, style fixes Jul 6, 2012

README.md

Understanding viewport

This is a set of simple HTML pages with various viewport and media query settings, that help me (and hopefully you as well) to better understand the working of the viewport meta tag and its @viewport CSS-based counterpart. You can find a live version on http://andreasbovens.github.com/understanding-viewport/.

Presentation

I made a presentation using these templates, which explains the working of the viewport mechanism, media queries, and more: http://slidesha.re/M6TRey

Thanks

Thanks to Patrick H. Lauke for the grid image and report.js code.