-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmetatest.html
106 lines (97 loc) · 5.16 KB
/
metatest.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta id="viewport" name="viewport" content="">
<style>
html {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFpSURBVHhe7durEcJAAEVRgsXRCPVCRziQUAI/BdhgKCDXZSYn+oqds2/idhjHcTWz7/z67LabmR1qdbje13M705zPAyvcDixYQSCklgUrCITUsmAFgZBaFqwgEFLLghUEQmpZsIJASC0LVhAIqWXBCgIhtSxYQSCklgUrCITUsmAFgZBaFqwgEFLLghUEQmpZsIJASC0LVhAIqWXBCgIhtSxYQSCklgUrCITUsmAFgZBaFqwgEFLLghUEQmpZsIJASC0LVhAI6XB6vkO+4PT4+A5esk4cgJesE6H+mR988IIFKwiE1LJgBYGQWhasIBBSy4IVBEJqWbCCQEgtC1YQCKllwQoCIbUsWEEgpJYFKwiE1LJgBYGQWhasIBBSy4IVBEJqWbCCQEgtC1YQCKllwQoCIbUsWEEgpJYFKwiE1LJgBYGQWhasIBBSy4IVBEJqWbCCQEgtC1YQCKllwQoCIR32l1vIl53+AI/JGTUBmZViAAAAAElFTkSuQmCC) repeat local;
}
</style>
<script>
function outputInfo() {
var info = "window.innerWidth = " + window.innerWidth + "<br />";
info += "window.innerHeight = " + window.innerHeight + "<br />";
info += "window.devicePixelRatio = " + window.devicePixelRatio + "<br />";
info += "document.documentElement.clientWidth = " + document.documentElement.clientWidth + "<br />";
info += "document.documentElement.clientHeight = " + document.documentElement.clientHeight + "<br />";
info += "Approx zoom = " + document.documentElement.clientWidth / innerWidth + "<br />";
document.getElementById("output").innerHTML = info;
}
function setViewport() {
var settings = document.getElementById("settings");
var viewportContent = [];
// width
if(document.querySelector("input[name='width']:checked").value == "devicewidth") {
viewportContent.push("width=device-width");
}
else if(document.querySelector("input[name='width']:checked").value == "staticwidth" && settings.staticwidthvalue.value != "") {
viewportContent.push("width=" + settings.staticwidthvalue.value);
}
// height
if(document.querySelector("input[name='height']:checked").value == "deviceheight") {
viewportContent.push("height=device-height");
}
else if(document.querySelector("input[name='height']:checked").value == "staticheight" && settings.staticheightvalue.value != "") {
viewportContent.push("height=" + settings.staticheightvalue.value);
}
// initial-scale
if(document.querySelector("input[name='initialscale']:checked").value == "staticinitialscale" && settings.staticinitialscalevalue.value != "") {
viewportContent.push("initial-scale=" + settings.staticinitialscalevalue.value);
}
// minimum-scale
if(document.querySelector("input[name='minscale']:checked").value == "staticminscale" && settings.staticminscalevalue.value != "") {
viewportContent.push("minimum-scale=" + settings.staticminscalevalue.value);
}
// maximum-scale
if(document.querySelector("input[name='maxscale']:checked").value == "staticmaxscale" && settings.staticmaxscalevalue.value != "") {
viewportContent.push("maximum-scale=" + settings.staticmaxscalevalue.value);
}
// user-scalable
if(document.querySelector("input[name='userscale']:checked").value == "no") {
viewportContent.push("user-scalable=no");
}
console.log(viewportContent.join(","));
document.getElementById("viewport").content = viewportContent.join(",");
}
</script>
</head>
<body>
<button onclick="outputInfo()">Get info</button><button onclick="setViewport()">Set viewport</button>
<form id="settings">
<div class="width">
width=
<input type="radio" name="width" value="none" checked>(none)</input>
<input type="radio" name="width" value="devicewidth">device-width</input>
<input type="radio" name="width" value="staticwidth"></input><input type="text" name="staticwidthvalue"></input>
</div>
<div class="height">
height=
<input type="radio" name="height" value="none" checked>(none)</input>
<input type="radio" name="height" value="deviceheight">device-height</input>
<input type="radio" name="height" value="staticheight"></input><input type="text" name="staticheightvalue"></input>
</div>
<div class="initialscale">
initial-scale=
<input type="radio" name="initialscale" value="none" checked>(none)</input>
<input type="radio" name="initialscale" value="staticinitialscale"></input><input type="text" name="staticinitialscalevalue"></input>
</div>
<div class="minscale">
minimum-scale=
<input type="radio" name="minscale" value="none" checked>(none)</input>
<input type="radio" name="minscale" value="staticminscale"></input><input type="text" name="staticminscalevalue"></input>
</div>
<div class="maxscale">
maximum-scale=
<input type="radio" name="maxscale" value="none" checked>(none)</input>
<input type="radio" name="maxscale" value="staticmaxscale"></input><input type="text" name="staticmaxscalevalue"></input>
</div>
<div class="userscale">
user-scalable=
<input type="radio" name="userscale" value="none" checked>(none)</input>
<input type="radio" name="userscale" value="no">no</input>
</div>
<div id="output"></div>
</form>
</body>
</html>