Skip to content
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 Updated license and readme. Jul 6, 2012
README.md Clean up the HTML a bit by removing optional attributes/values Jul 10, 2012
atviewport-mq.html Clean up the HTML a bit by removing optional attributes/values Jul 10, 2012
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 Clean up the HTML a bit by removing optional attributes/values Jul 10, 2012
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 Clean up the HTML a bit by removing optional attributes/values Jul 10, 2012
meta-widthdevicewidth.html Clean up the HTML a bit by removing optional attributes/values Jul 10, 2012
noviewport.html
odevrel130.png
odevrel260.png
pixel-grid.png added rest of files Jun 1, 2012
report.js added rest of files Jun 1, 2012
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.

Something went wrong with that request. Please try again.