Skip to content

Instantly share code, notes, and snippets.

@webketje

webketje/with-initial-scale.html

Last active September 29, 2021 08:34
Show Gist options
  • Save webketje/fe46d80d1c3f8168e8387988ddb25f5e to your computer and use it in GitHub Desktop.
Save webketje/fe46d80d1c3f8168e8387988ddb25f5e to your computer and use it in GitHub Desktop.
Download ZIP
How <meta name="viewport"> matters
Raw
with-initial-scale.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
* { box-sizing: border-box; }
html, body { background: #ccc; padding: 0; margin: 0; position: relative; }
#container { width: 960px; max-width: 100%; padding: 32px; margin: 32px auto; }
#contents { width: 600px; max-width: 100%; padding: 32px; margin: 0px auto; background: white; }
img { max-width: 100%; }
</style>
</head>
<body>
<div id="container">
<div id="contents">
<h1>Title</h1>
<img src="https://via.placeholder.com/600x150/111111" width="600" height="150">
Lorem Ipsum
</div>
</div>
</body>
</html>
Raw
without-initial-scale.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
* { box-sizing: border-box; }
html, body { background: #ccc; padding: 0; margin: 0; position: relative; }
#container { width: 960px; max-width: 100%; padding: 32px; margin: 32px auto; }
#contents { width: 600px; max-width: 100%; padding: 32px; margin: 0px auto; background: white; }
img { max-width: 100%; }
</style>
</head>
<body>
<div id="container">
<div id="contents">
<h1>Title</h1>
<img src="https://via.placeholder.com/600x150/111111" width="600" height="150">
Lorem Ipsum
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment