Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Clean up the HTML a bit by removing optional attributes/values

  • Loading branch information...
commit 772dd2e01d9b00d1d090ea35345d4441f66bbc4a 1 parent a098412
@mathiasbynens mathiasbynens authored
View
6 README.md
@@ -1,8 +1,8 @@
-# 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/
+# 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
+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.
View
8 atviewport-mq.html
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<head>
-<meta charset="utf-8">
+<meta charset="utf-8">
<title>@viewport {width: device-width;} + media query</title>
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
<style>
@-o-viewport {
width: device-width;
@@ -20,9 +20,9 @@
}
}
</style>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 atviewport.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>@viewport {width: device-width;}</title>
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
<style>
@-o-viewport {
width: device-width;
@@ -12,9 +12,9 @@
width: device-width;
}
</style>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
8 index.html
@@ -4,8 +4,8 @@
<meta charset="utf-8">
<title>Understanding viewport</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
</head>
<body id="index">
<article id="article">
@@ -20,7 +20,7 @@
<li><a href="meta-initialscale1.html">&lt;meta name="viewport" content="initial-scale=1"&gt;</a></li>
<li><a href="meta-initialscale2.html">&lt;meta name="viewport" content="initial-scale=2"&gt;</a></li>
<li><a href="meta-initialscale05.html">&lt;meta name="viewport" content="initial-scale=0.5"&gt;</a></li>
- <li><a href="meta-heightdeviceheight.html">&lt;meta name="viewport" content="height=device-height"&gt;</a></li>
+ <li><a href="meta-heightdeviceheight.html">&lt;meta name="viewport" content="height=device-height"&gt;</a></li>
<li><a href="meta-widthdevicewidth-maximumscale2.html">&lt;meta name="viewport" content="width=device-width, maximum-scale=2"&gt;</a></li>
<li><a href="meta-widthdevicewidth-minimumscale05.html">&lt;meta name="viewport" content="width=device-width, minimum-scale=0.5"&gt;</a></li>
<li><a href="meta-widthdevicewidth-userscalableno.html">&lt;meta name="viewport" content="width=device-width, userscalable=no"&gt;</a></li>
@@ -34,7 +34,7 @@
<h2>@viewport</h2>
<ul>
<li><a href="atviewport.html">@viewport {width: device-width;}</a></li>
- <li><a href="atviewport-mq.html">@viewport {width: device-width;} + media query</a></li>
+ <li><a href="atviewport-mq.html">@viewport {width: device-width;} + media query</a></li>
</ul>
</article>
<p>Github repo: <a href="https://github.com/andreasbovens/understanding-viewport">https://github.com/andreasbovens/understanding-viewport</a></p>
View
6 meta-heightdeviceheight.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="height=device-height"&gt;</title>
<meta name="viewport" content="height=320">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-initialscale05.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="initial-scale=0.5"&gt;</title>
<meta name="viewport" content="initial-scale=0.5">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-initialscale1.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="initial-scale=1"&gt;</title>
<meta name="viewport" content="initial-scale=1">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-initialscale2.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="initial-scale=2"&gt;</title>
<meta name="viewport" content="initial-scale=2">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-width320.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=320"&gt;</title>
<meta name="viewport" content="width=320">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel="stylesheet" type="text/css">
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-width480.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=480"&gt;</title>
<meta name="viewport" content="width=480">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-width640.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=640"&gt;</title>
<meta name="viewport" content="width=640">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
12 meta-widthdevicewidth-devicepixelratio.html
@@ -4,8 +4,8 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width"&gt; with device-pixel-ratio media query</title>
<meta name="viewport" content="width=device-width">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<style>
@media screen and (-o-min-device-pixel-ratio: 3/2) {
body {background-size: 1000px;}
@@ -15,10 +15,10 @@
}
@media screen and (-min--moz-device-pixel-ratio: 1.5) {
body {background-size: 1000px;}
-}
+}
</style>
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
@@ -33,7 +33,7 @@
<article id="article">
<h1 id="top">viewport setting</h1>
<pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
-+
++
@media screen and (-o-min-device-pixel-ratio: 3/2) {
body {background-size: 1000px;}
}
@@ -42,7 +42,7 @@ <h1 id="top">viewport setting</h1>
}
@media screen and (min--moz-device-pixel-ratio: 1.5) {
body {background-size: 1000px;}
-}
+}
</code></pre>
<h1>reported values</h1>
<output></output>
View
6 meta-widthdevicewidth-div600.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width"&gt; + &lt;div style="width: 600px"&gt;</title>
<meta name="viewport" content="width=device-width">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
8 meta-widthdevicewidth-initialscale1-div600.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; + &lt;div style="width: 600px"&gt;</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
@@ -21,7 +21,7 @@
<body>
<article id="article">
<h1 id="top">viewport setting</h1>
-<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+ &lt;div style="width: 600px"&gt;</code></pre>
<div style="width: 600px; background-color: red;">600px wide div</div>
<h1>reported values</h1>
View
6 meta-widthdevicewidth-initialscale1.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-widthdevicewidth-maximumscale2.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width, maximum-scale=2"&gt;</title>
<meta name="viewport" content="width=device-width, maximum-scale=2">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-widthdevicewidth-minimumscale05.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width, minimum-scale=0.5"&gt;</title>
<meta name="viewport" content="width=device-width, minimum-scale=0.5">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-widthdevicewidth-targetdensitydpidevicedpi.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"&gt;</title>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-widthdevicewidth-userscalableno.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width, userscalable=no"&gt;</title>
<meta name="viewport" content="width=device-width, userscalable=no">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-widthdevicewidth-withimage.html
@@ -4,8 +4,8 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width"&gt; with hi-res and lo-res images</title>
<meta name="viewport" content="width=device-width">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<style>
figure {
float: left; margin: 0 5px 5px 0;
@@ -15,7 +15,7 @@
}
</style>
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 meta-widthdevicewidth.html
@@ -4,10 +4,10 @@
<meta charset="utf-8">
<title>&lt;meta name="viewport" content="width=device-width"&gt;</title>
<meta name="viewport" content="width=device-width">
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
View
6 noviewport.html
@@ -3,10 +3,10 @@
<head>
<meta charset="utf-8">
<title>no viewport defined</title>
-<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700' rel='stylesheet' type='text/css'>
-<link href="style.css" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:200,400,700" rel="stylesheet">
+<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
-<script type="text/javascript">
+<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
Please sign in to comment.
Something went wrong with that request. Please try again.