Question

更新03/2019：此Q＆amp; A仍有一些活动，近5年我的问题出现了。请注意，此问题部分是由于旧时移动设备中出现更常见的违规行为。使用今天的浏览器和设备，摆弄视口可扩展性将成为解决更大问题的一个小问题，这可能是您的CSS或可能是您的标记中的问题。

我已经建立了十几个响应式网站，从未遇到过这个问题。基本上，我正在使用宽度=设备宽度的视口的元标记，但iPhone和Android设备仍在缩放。出于某种原因，我在Windows手机上没有这个问题。

以下是头部html的摘录：

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

这是主包装器的HTML（注意最外面的div是从jquery.mobile添加的：

<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >   
    <div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
        <div class="container">
        </div>  
    </div>
</body>

这是主要的包装CSS：

html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}

body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}

Bootstrap也在样式表之前加载。

我已尝试过许多不同的事情，包括：

删除jquery.mobile
删除bootstrap
将bootstrap更新到最新版本
将视口标记更改为以下内容：
- width = device-width，initial-scale = 1.0
- width = device-width，initial-scale = 1.0，user-scalable = no
- width = device-width，initial-scale = 1.0，user-scalable = 0
- width = device-width，initial-scale = 1.0，minimum-scale = 1.0，maximum-scale = 1.0
调整与width / max-width相关的各种CSS属性

我完全没有想法，似乎已经耗尽了我可以通过谷歌找到/尝试的任何新内容。我非常感谢您提供的任何帮助！

Answer 1

经过大量测试并继续搜索，我想出了一个似乎非常有效的修复方法。我看到类似问题的另一个解决方案提出了以下建议：

<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />

起初，这似乎是一个不错的解决方案，因为它适用于大多数手机。它有点让我烦恼，因为它显然不适合使用任何设备宽度。答案可以在这里找到：

Android viewport setting "user-scalable=no" breaks width / zoom level of viewport

此解决方案适用于大多数移动设备，但有些设备无效，导致显示器使用不正确的缩放。

我认为上述解决方案无效的原因是因为并非所有移动设备都使用基座320进行缩放。因此，当设备宽度不起作用时，这会导致约束不一致。

我尝试了很多不同的东西，但后来最终尝试了以下（到目前为止）似乎非常有效：

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">

我相信这个标签的不同之处在于它告诉设备使用它的原生尺寸，但随后会添加一个比例因子，告诉它不要像平时那样放大。

我从未找到解决问题的任何CSS调整，我欢迎将来可能进一步澄清问题/解决方案的任何其他答案。

我想补充的另一件事是，对于较大的设备（平板电脑，此问题中的网站不是为此而设计）可能更有效的替代元标记可能是设置最大比例而不是使用用户可扩展。像这样：

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">

EDIT / Update 2018：

这个问题仍然有很多点击，即使这是一个非常过时的问题。当然事后看来，经过多方面的响应经验，我可以说最初的问题和解决方案都是基于由于构建错误的响应式CSS和HTML而导致的间隙问题。

虽然这里的答案可能有助于未来的访问者在改造更加过时的代码时解决问题，但我强烈建议任何新的开发都符合最新的响应标准。如果您的标记和CSS符合要求，那么为什么您不希望在响应中使用视口的标准元数据（下面）：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

我刚刚删除了initial-scale = 1，并且Kindle上的Chrome和Silk上的Android突然完美运行，网站宽度与两个方向的屏幕宽度相匹配。

<meta name='viewport' content='width=device-width'>

我还没有在IOS上测试过，但是如果需要，我会添加IOS特定的黑客攻击。

Answer 3

检查this answer。简而言之：

<meta name="viewport" content="width=device-width; target-densityDpi=device-dpi;" />

Answer 4

Great Stuff，但是，我发现如果您在桌面上并且视口设置为静态宽度，则在水平滚动时，背景可能无法在屏幕上未显示的部分呈现。

要为非响应页面修复此问题，只需在主体上添加最小宽度。

body {
    min-width: 960px;
}

注意，这是为了将视口设置为静态宽度

<meta name=viewport content="width=960">

Answer 5

任何在将来寻求解决方案的人，请保持content =“ width = device-width，initial-scale = 0.5”，但请调整initial-scale =直到可行。我建立了一个在不同分辨率的显示器上都可以正常工作的网站，但是在移动设备上却非常糟糕。尝试0.5，然后一次向下缩小.1，直到起作用。在两部Android手机上，0.3非常适合我。

Answer 6

我遇到了Bootstrap 4.3.1的问题，它看起来像使用此元标记设置在移动设备上按比例缩小的平板电脑视图版本：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

因此，我然后使用下面的meta标签在移动设备上进行了修复：


<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

现在看来bootstrap 4应该看起来像跨设备的

Answer 7

以防万一其他人遇到相同的问题，截至3/2020，我的问题似乎是我在@Media查询中设置输入的方式。

对我来说，meta标签实际上没有做任何事情。

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

我的问题更多

@media only screen and (max-width: 500px) {
   .input-example {
    font-size: .9rem;
   }
}

一旦我将其更改为：

@media only screen and (max-width: 500px) {
   .input-example {
    font-size: 1rem;
   }
}

一切似乎都正常。根据我的阅读，它必须是1rem或16px。

为什么我的视口标签在大多数移动设备上都没有正确使用设备宽度（无缩放）？

7 个答案: