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

如何使用元视口调整页面以适应窗口？这是我的代码。我不显示在jsfiddle上，因为jsfiddle不赞成使用meta标签。如何使用元视口调整页面以适应窗口？

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 
<style> 
[email protected] { 
    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×600像素分辨率的我想要显示 http://i.imgur.com/hwaoql6.png

我该如何处理元视口？

来源

2016-09-17 peat wedty

您不能使用媒体查询吗？ –

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

如果您想尝试设置视口宽度，通过设置视口元标记的宽度属性：

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

来源

2016-09-17 06:16:01 Brian

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

回答

相关问题