Question

我读到metaviewport标记中的width定义视口的虚拟宽度，然后根据initial-scale按比例放大此视口以填充屏幕。问题是，当我将width = device-width更改为width = 600或width = 1200等任何其他值时，我看不出任何差异。以下两个版本相同：

width = 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>

width = 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>

Answer 1

Meta视口用于帮助在非典型大小的屏幕上呈现页面。

Windows 7桌面缩放屏幕上的Chrome不支持它。

要查看在智能手机大小的显示器上使用Chrome for Android或Mobile Safari等内容所需的任何效果。

什么＆＃34;宽度＆＃34;在meta viewport标签中做什么？

1 个答案: