forked from andreasbovens/understanding-viewport
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatviewport-mq.html
60 lines (60 loc) · 1.83 KB
/
atviewport-mq.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<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">
<style>
@-o-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@media screen and (max-device-width: 480px) {
@-o-viewport {
width: 480px;
}
@-ms-viewport {
width: 480px;
}
}
</style>
<link href="style.css" rel="stylesheet">
<script src="report.js"></script>
<script>
function init() {
var article = document.getElementById('article');
var top = document.getElementById('top');
top.addEventListener('click', function () {
article.classList.toggle('fold');
}, false);
}
window.addEventListener('load', init, false);
</script>
</head>
<body>
<article id="article">
<h1 id="top">viewport setting</h1>
<pre><code>@-o-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@media screen and (max-device-width: 480px) {
@-o-viewport {
width: 480px;
}
@-ms-viewport {
width: 480px;
}
}</code></pre>
<h1>reported values</h1>
<output></output>
<h1>lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non elit non enim consectetur iaculis ut ac mi. Sed adipiscing nulla id ipsum placerat congue. Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
<p>Quisque nec diam eget libero convallis iaculis. Nam feugiat purus id diam placerat suscipit. Cras nec tincidunt leo. Integer tincidunt porttitor enim, et elementum augue pellentesque id. Quisque leo velit, tincidunt in pretium in, cursus eu elit. Etiam vitae lacus ligula.</p>
</article>
</body>
</html>