iOS Safari：100% 宽度固定位置 header 比视口宽

Question

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

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

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

我已将代码缩减为以下内容，但仍然无法解决这个问题 - 以下代码在我测试过的所有其他浏览器中都能完美运行。（我的目标是 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>

Answer 1

如果您喜欢使用 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);
});

Answer 2

我知道这个问题已经有一年了，但问题仍然存在于 iOS 中，我遇到了与固定元素漂移完全相同的问题，这让我抓狂。答案很简单：只需用 div.wrapper 包裹 div #bgs2（或任何包含 "white-space:nowrap" 的元素）（class 显然不重要），然后设置溢出到自动：

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

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

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

iOS Safari：100% 宽度固定位置 header 比视口宽

iOS Safari: 100% width fixed position header wider than viewport

html

css

safari

ios