Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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

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.