如何使用元視口調整頁面以適應窗口？

如何使用元視口調整頁面以適應窗口？這是我的代碼。我不顯示在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

如何使用元視口調整頁面以適應窗口？

回答

相關問題