11

更新 12/2020：鉴于这篇文章仍然活跃，我必须强调这里没有适用于现代 Web 开发的答案。实际上，这里的几乎所有答案都会使您的网站在容纳残疾人方面处于不稳定的境地。head您的响应式网站应该在标签中包含的唯一内容是：

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

如果您试图将用户锁定在特定范围内（例如诉讼甚至政府罚款），那么不仅仅是用户体验面临风险。

-- 继续自担风险 --

更新 03/2019：这个问答仍然有一些活动，近 5 年我的问题出现了。请注意，此问题的部分原因是当时较旧的移动设备更常见的违规行为。对于当今的浏览器和设备，摆弄视口可伸缩性将是解决更大问题的鞋拔，这可能是您的 CSS 或您的标记中的问题。

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

这是head 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
  • 删除引导程序
  • 将引导程序更新到最新版本
  • 将视口标签更改为以下内容：
  • 宽度=设备宽度，初始比例=1.0
  • 宽度=设备宽度，初始比例=1.0，用户可缩放=否
  • 宽度=设备宽度，初始缩放=1.0，用户可缩放=0
  • 宽度=设备宽度，初始比例=1.0，最小比例=1.0，最大比例=1.0
  • 调整与宽度/最大宽度相关的各种 CSS 属性

我完全没有想法，似乎已经用尽了我能通过谷歌找到/尝试的任何新东西。我将不胜感激您能提供的任何帮助！

4

7 回答 7

10

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

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

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

Android视口设置“user-scalable=no”会破坏视口的宽度/缩放级别

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

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

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

<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">

编辑/更新 2018：

尽管这是一个非常过时的问题，但这个问题仍然受到很多人的欢迎。当然，事后看来，经过更多的响应式经验之后，我可以说最初的问题和解决方案都是基于构建不良的响应式 CSS 和 HTML 导致的权宜之计问题。

虽然这里的答案可能会帮助未来的访问者解决在改造更过时的代码时遇到的问题，但我强烈建议任何新的开发都符合最新的响应标准。如果您的标记和 CSS 符合要求，那么您不希望响应式视口的标准元数据的原因很少（如下）：

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2014-02-15T20:31:06.450 回答
4

我刚刚删除了 initial-scale=1，突然之间，Chrome 上的 Android 和 Kindle 上的 Silk 都运行良好，站点宽度与两个方向的屏幕宽度都匹配。

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

我没有在 IOS 上测试过，但如果需要，我会添加一个 IOS 特定的 hack。

于 2018-04-01T12:01:05.080 回答
2

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

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

所以然后我使用下面的元标记来修复移动设备：


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

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

于 2019-03-12T04:20:47.043 回答
0

检查这个答案。简而言之 ：

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi;" />
于 2014-08-26T09:15:33.250 回答
0

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

对我来说，元标记并没有真正做任何事情。

<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。

于 2020-03-10T11:45:55.390 回答
0

任何在未来寻找修复的人，请继续使用 content="width=device-width, initial-scale=0.5" 但调整 initial-scale= 直到它起作用。我建立了一个网站，在不同分辨率的显示器上运行良好，但在移动设备上却非常糟糕。尝试 0.5，然后一次向下缩放 0.1，直到它起作用。在两部 Android 手机上，0.3 对我来说非常完美。

于 2018-11-30T21:38:38.453 回答
0

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

要为非响应页面解决此问题，只需在正文中添加一个最小宽度。

body {
    min-width: 960px;
}

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

<meta name=viewport content="width=960">
于 2015-12-02T18:49:53.763 回答