Question

我试图了解视口和初始缩放是如何工作的。我阅读了this，this和this并尝试了以下实验，我可以使用firefox版本43.0在samsung galaxy s4上重现。

如果我在包含此代码的galaxy s4上打开一个网页：

  <!DOCTYPE html >
<html >
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
    <meta name="viewport" content="width=300px, initial-scale=2.0"/>    
  </head>
  <body>
    <div style='background-color:red;width:100%'>Adam 8</div>           
  </body>
</html>

然后我得到以下结果：

这对我来说很有意义，因为div的宽度为300个CSS像素，galaxy s4有640个设备像素，而initial-scale = 2应该强制我的手机使用600个设备像素来表示300个CSS像素div -container，它给出了40个设备像素的空白区域（但是，空白空间确实看起来比我设备像素更宽，但我暂时忽略它）。然后，我将初始比例从2更改为1：

<!DOCTYPE html >
<html >
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
    <meta name="viewport" content="width=300px, initial-scale=1.0"/>


  </head>
  <body>
    <div style='background-color:red;width:100%'>Adam 9</div>

  </body>
</html>

由于initial-scale = 1，我假设我的手机仅使用300个设备像素来表示红色条。但是，我明白了：

为什么红条现在是640个设备像素长而不是300个设备像素？

Answer 1

在第二个示例中，视口元标记过度约束。浏览器将限制最小缩放级别，以便您无法缩小以查看超出内容范围的内容。在你的情况下，内容是~300px，屏幕大小是640px所以最小缩放级别是~2.1。但是，您指定了initial-scale = 1.0，因此无法实现这一点。在这种情况下，浏览器通过扩展内容宽度以允许指定的比例来选择遵守初始比例。

第一种情况对我来说有点令人费解，因为同样的事情应该发生在较小程度上。这是我在Nexus 4上具有相同屏幕高度的Chrome浏览器中的picture的{{3}}。

通常，视口元标记未指定，并且这些情况下的行为会因浏览器而异。我会避免设置初始比例，让浏览器自动完成。通常他们会尝试缩小以适应屏幕上的所有内容。

视口的奇怪初始缩放行为

1 个答案: