CSS 在某些 iPhone 上奇怪地中断了答案

【问题标题】：CSS weirdly breaks on some iPhonesCSS 在某些 iPhone 上奇怪地中断了
【发布时间】：2017-09-14 07:06:47
【问题描述】：

主要思想

我有一个网页，其中包含用于不同屏幕的自定义 css 文件。经过大量搜索和使用没有错误的响应式模拟器测试仪后，一些 iPhone 用户抱怨页面样式损坏。

页面有 2 个自定义 CSS 文件，用于较大 (>960px) 和较小 (

我有这个元标记：

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

在小屏幕（甚至低至 260 像素宽度）的浏览器测试中显示没有问题。还验证了 CSS here。

对于一些使用新更新的 iPhone 6 浏览器（Safari 和 Chrome 的结果相同）的人来说，这是这样的。

所有其他手机（据我所知）都没有这个问题。

【问题讨论】：

【解决方案1】：

关于其他人所说的 150 % 宽度：在 js_compressed.js 中有一些 JavaScript 设置该宽度...它是压缩的，所以很难说出它的意义，但它看起来很漂亮-在 Chrome Devtools 中打印：

b() && ($("section.top").css("width", "150%"),
$("footer").css("width", "150%"));

在它的正下方有一些与 FancyBox 相关的东西（我猜是this）...也许与此有关？

【讨论】：

【解决方案2】：

您的页眉（可能还有页脚）设置为 150% 的宽度？这就是破坏你的页面的原因...... 它创建了一个更广泛的部分，因此破坏了您网站的主要部分。

尝试去掉150%的硬宽度；最大宽度不应超过 100%。

【讨论】：

不。那不是真的。我从来没有将max-width: 150% 设置为任何东西。此外，这种设计不会在其他页面上中断（它具有相同的 H 和 F）。为什么它只在 iphone 上损坏？
按照@Andrew Ice 所说，我在浏览器堆栈中检查了您的网站（设备：iPhone 6S，Safari 浏览器 iOS9），您的网站中有两个内联引用将宽度设置为150%：<section class="top clearfix".. 和你的<footer>。删除这些内联宽度至少可以解决浏览器堆栈中的显示问题。您的代码中是否有某些内容可以按设备设置这些宽度？
@MikelisBaltruks 对不起，我在工作，无法回复更多信息，但也在这里使用 defteH。您的应用程序中的某些东西将宽度设置为 150%。我不确定是什么，也许你没有设置它，但它在 CSS 中最明显。（也正在使用浏览器堆栈。）。我再看看。给我一些。
@defteH 你只有在 iPhone 上有吗？这很奇怪 - 在 chrome 和我的真实代码中我没有这样的样式。
感谢各位的帮助。你真的帮了大忙。这次我将赏金 klumme 的答案，因为他将我链接到原因 - 最小化的 js 文件。非常感谢！

【解决方案3】：

由于我没有特定的代码 sn-p 来检测您的问题，因此很难确定您的代码的哪一部分创建了这个问题，所以我无法具体回答您的问题，我也没有这个问题我的设备，但我有一些东西给你，你可能需要看看

Check out this SO post 特别查看第一个答案，它包含您需要了解的 iOS Safari 浏览器的所有技巧。有了这个，我希望我的尝试能帮到你:)

【讨论】：

【解决方案4】：

请尝试

#top_block_wrapper, #secondary_block{
    display: block;
}

而不是display: table-cell

【讨论】：

我的#top_block_wrapper 是display: table。您认为在中间添加一个 display: table-row 会解决问题吗？
我需要检查你是否可以分享sn-p，那会很棒
嗯 - 事实证明 - 你的解决方案不是正确的答案。但我会留下 +1 来进行这项运动并尝试！