Question

我有一个固定宽度的网页（640像素宽）。我希望这个页面缩小到移动设备的宽度。但是，如果设备的原始宽度大于640像素，我不希望它被拉伸。看起来很简单：

<meta name="viewport" content="width=640, maximum-scale=1.0" />

这在iPad / iPhone中可以正常使用。但是，在Android平板电脑上（例如在横向模式下），内容会按比例放大以适合显示。换句话说，Android只是忽略了maximum-scale = 1。您可以看到包含问题 here 的示例页面。为了完整起见，这里有来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test Viewport</title>
    <meta name="viewport" content="width=640, maximum-scale=1.0" />
    <style>
      div.bar {
        position: absolute;
        width: 636px;
        height: 50px;
        background-color: yellow;
        border: 2px solid black;
        left: 50%;
        margin-left: -320px;
      }
    </style>
  </head>
  <body>
    <div class="bar">
    </div>
  </body>
</html>

我一直在使用viewport元标记进行大量的研究和实验。我已经阅读了关于这个主题的所有内容，但没有看到这个看似基本的问题。

两个注释：

这不是目标密度显示问题
在这种情况下，将视口宽度设置为设备宽度没有帮助，因为内容宽度是固定的并且大于（例如）手机的纵向设备宽度。如果我设置width = device-width，页面将不会自动缩小以适合手机..

非常感谢。

Answer 1

在我的头撞到桌子上之后，我找到了一个解决方案：

不幸的是，iOS和Android似乎只是表现不同（Android显然没有按照规范所说的忽略最大规模）。解决方案是使用JavaScript专门基于解决方案：

如果屏幕宽度（请参阅下面的注释）大于或等于固定页面宽度（在我的示例中为640），则将视口元标记的内容宽度设置为屏幕宽度
< / LI>
否则将视口元标记的内容宽度设置为固定页面宽度（640）

的Presto。 Lame它需要JavaScript专业化，但这就是生活。

请注意，如果设备处于横向模式，则iPad / iPhone上的Javascript screen.width 不正确（iPad仍然会报告纵向宽度而不是横向宽度，而不像Android那样正确这个案例！）。因此，您需要在iPad / iPhone上查看 window.orientation 并使用 screen.height 而不是 screen.width 景观。

Answer 2

我宁愿使用

width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi

而不仅仅是Max scale属性...... target-densityDpi属性是特定于Android的，也许它可以解决您的问题。

使用固定宽度视口元标记时，Android会忽略最大比例

2 个答案: