Question

如何使用元视口调整页面大小以适应窗口？这是我的代码。我没有在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×600像素分辨率它的节目 http://i.imgur.com/2CqqVil.png

但是我要展示800 x 600像素分辨率 http://i.imgur.com/hwaoql6.png

如何处理元视口？

Answer 1

听起来好像你想要一个800px的固定视口宽度，如果你想保持它看起来相同但只是缩放。从内存中，这可能会导致某些浏览器/设备上出现一些不一致的行为，因此纯粹的CSS方法（如媒体查询）（正如Lister先生建议的通常是一个更好的解决方案）

如果您想尝试设置视口宽度，可以通过在视口元标记上设置width属性来完成：

<meta name="viewport" content="width=800, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

如何使用元视口调整页面大小以适应窗口？

1 个答案: