Android在使用固定宽度的viewport meta标签时忽略了maximum-scale限制。

Question

Android在使用固定宽度的viewport meta标签时忽略了maximum-scale限制。

7

我有一个宽度固定为640像素的网页。我希望这个页面可以适应移动设备的宽度。但是，如果设备本身的宽度大于640像素，我不希望它被拉伸。听起来很简单：

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

这在iPad/iPhone上按预期工作。然而，在Android平板电脑上（例如横向模式），内容被缩放以适应显示器。换句话说，Android简单地忽略了maximum-scale=1。您可以查看一个存在问题的示例页面此处。为了完整起见，以下是源代码：

<!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 meta标签进行研究和实验。我已经阅读了关于此主题的几乎所有内容，但似乎没有提到这个看起来基本的问题。

两点说明：

这不是一个target-densitydpi问题
将viewport宽度设置为device-width在这种情况下并不有用，因为内容宽度是固定的，比（例如）手机纵向设备宽度更大。如果我将width=device-width设置为页面宽度，则页面不会自动缩小以适应手机屏幕。

非常感谢。

- logidelic

2个回答

0

我宁愿使用

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

除了最大缩放比例属性之外... target-densityDpi属性是专门针对Android的，也许可以解决您的问题。

- ChristopheCVB

1

我不确定你所说的“我宁愿使用”的意思，但这并没有解决问题。 - logidelic

无法在Android上运行。你不能像在iPhone上那样适配Android的内容... OP是正确的。 - Miro

以上代码可以禁用我的安卓设备上的缩放功能。 - rottitime

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- logidelic · Accepted Answer

在我不停地抓耳挠腮之后，我终于找到了解决方案：

不幸的是，iOS和Android表现出了不同（Android明显违反规范，忽略maximum-scale的值）。解决方案是使用JavaScript根据分辨率进行特定的设置：

如果屏幕宽度（见下文）大于或等于固定页面宽度（例如我的示例中的640像素），则将viewport meta标签的内容宽度设置为屏幕宽度
否则设置viewport meta标签的内容宽度为固定页面宽度（640像素）

完成。很遗憾需要JavaScript特化，但这就是生活。

请注意，iPad/iPhone上的Javascript screen.width在设备处于横向模式时是不正确的（与Android不同，后者在这种情况下正确地获取了横向宽度！）。因此，如果您处于横向模式，则需要检查iPad/iPhone上的window.orientation并使用screen.height而不是screen.width。