如何使用元视口(viewport)调整页面大小以适应窗口？ 这是我的代码。我没有在 jsfiddle 上显示，因为 jsfiddle 不批准使用元标记。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style>
-ms-@viewport {
width: device-width;
initial-scale: 1;
zoom: 1;
min-zoom: 1;
max-zoom: 3;
user-zoom: fixed;
}
@viewport {
width: device-width;
initial-scale: 1;
zoom: 1;
min-zoom: 1;
max-zoom: 3;
user-zoom: fixed;
}
</style>
</head>
<body style="overflow:hidden; margin:0">
<div id="main">
<div id="content" style=" text-align: center; ">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
<img src="http://i.imgur.com/vgz0PDe.png">
</div>
<div id="footer">
</div>
</div>
</body>
当我测试 1280 x 800 像素分辨率时，它显示 http://i.imgur.com/nzmWQO2.png
然后我测试它显示的 800 x 600 像素分辨率 http://i.imgur.com/2CqqVil.png
但是我想在 800 x 600 像素的分辨率下显示 http://i.imgur.com/hwaoql6.png
我该如何处理元视口(viewport)？
最佳答案
如果你想让它看起来一样但只是缩放的话，听起来你可能想要一个固定的 800 像素的视口(viewport)宽度。根据内存，这可能会导致某些浏览器/设备出现一些不一致的行为，因此纯 CSS 方法，例如媒体查询(正如 Lister 先生所建议的，通常是更好的解决方案)
如果您想尝试设置视口(viewport)宽度，可以通过在视口(viewport)元标记上设置宽度属性来完成:
<meta name="viewport" content="width=800, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
关于html - 如何使用元视口(viewport)调整页面大小以适合窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39543276/