Skip to content
This repository

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
Octocat-spinner-32 .htaccess added rest of files June 01, 2012
Octocat-spinner-32 LICENSE.txt Updated license and readme. July 06, 2012
Octocat-spinner-32 README.md Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 atviewport-mq.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 atviewport.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 index.html Added extra device-pixel-ratio examples July 11, 2012
Octocat-spinner-32 meta-heightdeviceheight.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-initialscale05.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-initialscale1.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-initialscale2.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-width320.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-width480.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-width640.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-devicepixelratio15.html Added extra device-pixel-ratio examples July 11, 2012
Octocat-spinner-32 meta-widthdevicewidth-devicepixelratio2.html Added extra device-pixel-ratio examples July 11, 2012
Octocat-spinner-32 meta-widthdevicewidth-devicepixelratio225.html Added extra device-pixel-ratio examples July 11, 2012
Octocat-spinner-32 meta-widthdevicewidth-div600.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-initialscale1-div600.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-initialscale1.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-maximumscale2.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-minimumscale05.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-targetdensitydpidevicedpi.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-userscalableno.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth-withimage.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 meta-widthdevicewidth.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 noviewport.html Clean up the HTML a bit by removing optional attributes/values July 10, 2012
Octocat-spinner-32 odevrel130.png added rest of files June 01, 2012
Octocat-spinner-32 odevrel260.png added rest of files June 01, 2012
Octocat-spinner-32 pixel-grid.png added rest of files June 01, 2012
Octocat-spinner-32 report.js added rest of files June 01, 2012
Octocat-spinner-32 style.css Added index.html, style fixes July 06, 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.