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

时间:2015-03-28 10:08:34

标签: html ios css safari

我遇到了一个特效影响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>

2 个答案:

答案 0 :(得分:7)

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

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

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

未来的某个人肯定会发现这个奇怪的问题,所以希望它有所帮助。

答案 1 :(得分:0)

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