iOS Safari：比视口宽 100% 宽度的固定位置标题答案

【问题标题】：iOS Safari: 100% width fixed position header wider than viewportiOS Safari：比视口宽 100% 宽度的固定位置标题
【发布时间】：2015-03-28 10:08:34
【问题描述】：

我遇到了一个特别影响 iOS 上 Safari 的问题。

我正在构建一个具有固定位置标题的页面，该标题是视口的宽度。页面内容是一系列应该向右滚动的图像（数量可变）。当用户滚动时，标题应保持在原位。

在 iOS Safari 上，固定标题比视口稍大，并且滚动速度也与其他内容不同。

我已将代码缩减为以下内容，但仍然无法解决此问题 - 以下代码在我测试过的所有其他浏览器中都能完美运行。（我的目标是 IE8+）

我已经托管了这个问题的示例here.

感谢您的任何建议和帮助。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html {
    font-size: 10px;
    height:100%;
    white-space: nowrap;
}
body {
    height:100%;
    padding:0;
    margin:0;
}
#dgs2 {
    height:75%;
    display:inline-block;
}
img{
    height: 100%;
}
#pad{
    height:6em;
    padding-bottom:1px;
}
#header{
    position:fixed;
    width:100%;
    height:6em;
    border-bottom:1px solid;
}
.menuRight{
    float:right;
}
</style>
</head>
<body>
    <div id="header">
        <div class="menuRight"><h2>Menu</h2></div>
        <h1>Testing scroll on iPhone</h1>
    </div>
    <div id="pad"></div>
    <div id="dgs2">
        <img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/>
    </div>
</body>
</html>

【问题讨论】：

标签： html ios css safari

【解决方案1】：

我知道这个问题在这一点上已经存在一年了，但这个问题在 iOS 中仍然存在，我遇到了与固定元素漂移完全相同的问题，这让我发疯了。答案很简单：只需用 div.wrapper 包装 div #bgs2（或任何带有“white-space:nowrap”的元素）（该类显然不重要），并将溢出设置为 auto：

.wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

我还添加了 webkit-overflow-scrolling，这有助于避免重绘。

以后一定有人会发现这个奇怪的问题，希望对你有所帮助。

【讨论】：

你说得对，如果我没记错的话，我确实最终做了类似的事情，这是一场噩梦，我永远无法弄清楚我做了什么来解决它。感谢您回答这个 iOS 荒地中所有其他迷失的灵魂

【解决方案2】：

如果你喜欢使用 jQuery，那么你可以使用类似的东西：

$(window).ready(function() {
  var bodyWidth = $(window).width();
  $("#header").width(bodyWidth).css('width', bodyWidth);
});

我同时包含了属性宽度和 css 宽度，只是为了确保它在所有浏览器中都有效。此外，如果您将元标记更改为：

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

这也应该有帮助。

更新 1

抱歉，我没有正确阅读标题的 CSS 样式。标题的样式应如下所示：

#header{
    position:fixed;
    top: 0; // Set these positioning attributes 
    left: 0; // to hold the header in the top left.
    width:100%;
    height:6em;
    border-bottom:1px solid;
}

更新 2

又是一次 CSS 更新。我注意到您的代码如下：

html {
    font-size: 10px;
    height:100%;
    white-space: nowrap;
}
body {
    height:100%;
    padding:0;
    margin:0;
}
#dgs2 {
    height:75%;
    display:inline-block;
}

您需要将其更改为如下所示：

html {
    font-size: 10px;
    height:100%;
}
body {
    height:100%;
    padding:0;
    margin:0;
}
#dgs2 {
    height:75%;
    display:inline-block;
    white-space: nowrap;
}

如果您将white-space: nowrap; 移动到#dsg2 div 而不是将其分配给html，那么这应该是您的最终修复。此外，将以下内容添加到 jQuery 代码中以配合您已有的内容：

$(window).resize(function() {
  var bodyWidth = $(window).width();
  $("#header").width(bodyWidth).css('width', bodyWidth);
});

【讨论】：

感谢您的建议，这确实可以通过将标题强制为正确大小来改善情况，但如果我水平滚动标题仍会随着页面移动，而且奇怪的是，速度会变慢。它需要保持固定，就像在其他浏览器上一样。
刚刚用一些 CSS 样式更新了我的答案。这应该 100% 解决您的问题，我遇到了类似的问题，但是由于我错过了这些属性，所以侧边栏垂直滚动。
再次感谢，我同意这应该可以工作，但不幸的是，在 iOS 设备上的 Safari 上，页眉仍在滚动页面（比图像慢）。
对我来说看起来不错，在 iPhone 5S、6、iPad mini 3 和 iPad Air 上进行了测试
外加一部 iPhone 4S 和一部 iPod。