-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
44 lines (41 loc) · 1.65 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>viewport.js example</title>
<!-- See setviewport.js for details on this -->
<script>
function mobileWidth(){window.viewportWidth;var c=screen.width,e=screen.height,a=document.documentElement.clientWidth,d=document.documentElement.clientHeight;if(c<=a){a=c}if(e<=d){d=e}if(window.orientation===undefined){viewportWidth=a}else{if(window.orientation===0){viewportWidth=c}else{viewportWidth=e}}};
function addViewport(){docHead.appendChild(viewport)};
var hasViewport=document.getElementById("viewport"),
docHead=document.getElementsByTagName("head")[0],
viewport=document.createElement("meta");
viewport.id="viewport";
viewport.name="viewport";
viewport.content="width=device-width initial-scale=1";
window.triggerWidth=600;
mobileWidth();
if(viewportWidth<=triggerWidth&&!hasViewport){addViewport()};
</script>
<style>
.bigblock {
width: 900px;
border: 10px solid green;
}
@media screen and (max-width: 600px) {
.bigblock {
width: 90%;
border: 10px solid red;
}
}
</style>
</head>
<body>
<h2>Simple example</h2>
<div class="bigblock">
<p>This is a big block-level element, set to 900px wide.</p>
<p>On mobile devices, scaling will try to make it fit the screen. However, below 600px (2/3 of the original), we want scaling turned off so that we can apply our responsive styles.</p>
<p>Note: you should set the trigger width to a number that works best for your site/design.</p>
</div>
</body>
</html>