我读到 metaviewport 标记中的 width 定义了视口(viewport)的虚拟宽度，然后根据 initial-scale 放大此视口(viewport)以填充屏幕。问题是，当我将 width = device-width 更改为任何其他值(如 width = 600 或 width = 1200。以下两个版本呈现相同:
宽度 = 600:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width= 600px, initial-scale = 2">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
ul {
list-style: none;
}
.container {
width: 96px;
height: 96px;
position: relative;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container"> Hello
</div>
</body>
</html>
宽度 = 50 :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width= 50, initial-scale = 2">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
ul {
list-style: none;
}
.container {
width: 96px;
height: 96px;
position: relative;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container"> Hello
</div>
</body>
</html>
最佳答案
元视口(viewport)用于帮助在非典型尺寸的屏幕上呈现页面。
Windows 7 桌面缩放屏幕上的 Chrome 不支持它。
要查看任何效果，您需要在智能手机大小的显示屏上使用 Android 版 Chrome 或 iOS 版 Mobile Safari 等软件。
关于html - "width"在元视口(viewport)标签中做什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36407836/