网页未调整大小以适应 iPhone 6 Plus 上的屏幕答案

【问题标题】：Webpage is not resizing to fit the screen on iPhone 6 Plus网页未调整大小以适应 iPhone 6 Plus 上的屏幕
【发布时间】：2015-10-30 20:56:06
【问题描述】：

现在，这不是一个响应式网站。客户只要求他应该能够在第一视图中查看完整的页面（无需在移动屏幕上放大或缩小）。之后，他会捏着捏着捏出来查看和阅读文字。

所以我做了一些研究，发现这可以使用视口元标记来完成。我将以下代码插入到<head> 部分

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

据我所知，这段代码应该

但是，此代码似乎仅适用于 Android 版 Chrome。 iPhone 6 Plus 上的 Safari 浏览器仍显示整页。这是我在 Browserstack 上模拟的 iPhone 6 Plus 上看到的屏幕截图。 http://prntscr.com/81vs1n

有人可以调查一下并指出我可能以不正确的方式做事。

附：这是我关于 Stack Overflow 的第一个问题。我愿意接受有关改进提问格式的建议。

编辑 - 我的网页宽度为 1170 像素。

【问题讨论】：

【解决方案1】：

所以我在阅读有关视口的更多信息时偶然发现了this link。今天我了解到，视口用于规范化内置的缩放行为。

感谢@subodh 为我指明了这个方向。

现在，我已经更新了我的元标记，使其看起来像这样，它就像一个魅力。

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

编辑 - 忘了提，我从我的实际代码中删除了初始比例。它导致页面缩放到 100% 原始像素，因此，它必须水平滚动。

【讨论】：

【解决方案2】：

在元标记中设置固定宽度不根据设备。

【讨论】：

我的页面宽度是 1170px（<div> 和 class=container-nomb）。所以根据你的说法，我应该把这段代码放在 head 部分。 <meta name="viewport" content="width=1170, initial-scale=1, user-scalable=yes, maximum-scale=1"> 但是，即使这样也无济于事。相反，我没有看到任何变化。
这是初始状态。那时情况好多了。但是，在 iPhone 中这种情况下存在水平滚动。我给你看屏幕。 prntscr.com/81wbri

【解决方案3】：

width=device-width 是问题所在。

它可以设置为特定数量的像素，例如 width=600 或特殊值 device-width 值，即屏幕宽度（以 CSS 像素为单位，比例为 100%）。

视口的宽度（以像素为单位）。默认值为 980。范围为 200 到 10,000。

【讨论】：