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

This branch is even with andreasbovens:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.htaccess
LICENSE.txt
README.md
atviewport-mq.html
atviewport.html
index.html
meta-heightdeviceheight.html
meta-initialscale05.html
meta-initialscale1.html
meta-initialscale2.html
meta-width320.html
meta-width480.html
meta-width640.html
meta-widthdevicewidth-devicepixelratio15.html
meta-widthdevicewidth-devicepixelratio2.html
meta-widthdevicewidth-devicepixelratio225.html
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
meta-widthdevicewidth-userscalableno.html
meta-widthdevicewidth-withimage.html
meta-widthdevicewidth.html
noviewport.html
odevrel130.png
odevrel260.png
pixel-grid.png
report.js
style.css

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.