desktop-viewport
Version:
Hastily makes desktop browsers respect the viewport setting
103 lines (102 loc) ā¢ 2.15 kB
HTML
<html lang="en">
<head>
<meta name="viewport" content="width=1200, initial-scale=1">
<meta charset="utf-8">
<title>Desktop-viewport</title>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/promise-polyfill/promise.min.js"></script>
<script>mocha.setup('bdd');</script>
<script src="test.js"></script>
<script>
window.async = function(u, c){
var d = document, t = 'script',
o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.src = u;
if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
s.parentNode.insertBefore(o, s);
}
async(window.location.hash === '#local' ? '../dist/desktop-viewport.js':'../dist/desktop-viewport.min.js',function(){
mocha.run();
})
</script>
<style>
* {
margin: 0;
padding: 0;
display: block;
float: left;
box-sizing: border-box;
}
head,script {
display: none;
}
</style>
</head>
<body>
<div id="container">
<div style="
padding:1em;
width:1200px;
display:flex;
background:#fff;
font-size: 2em;
align-items: center;
justify-content:space-between;
"
>
<h1>š</h1>
<h2>
0ļøā£ 1ļøā£ 2ļøā£ 3ļøā£
</h2>
</div>
<div style="
padding: 30vh 1em;
text-align: center;
font-size: 3em;
width: 1200px;
background: aliceblue;
">
šššāļø
</div>
<div style="
padding: 100vh 1em;
text-align: center;
font-size: 3em;
width: 600px;
background: white;
">
šššāļø
</div>
<div style="
padding: 100vh 1em;
text-align: center;
font-size: 3em;
width: 600px;
background: black;
">
šššāļø
</div>
<div style="
padding: 100vh 1em;
text-align: center;
font-size: 3em;
width: 1200px;
background: red;
">
šššāļø
</div>
<div style="
padding: 100vh 1em;
text-align: center;
font-size: 3em;
width: 1200px;
background: limegreen;
">
šššāļø
</div>
</div>
<div id="mocha"></div>
</body>
</html>