我做了一个4000px宽背景的网页,在Chrome和safari上,在Windows、Mac和iPad上滚动效果很好。我可以滚动到左边,顶部和右边,没有任何问题,就像你所期望的那样。
但是,当我将此页面转换为.wdgt格式,将其导入iBooks并在iPad上预览时(4)页面将不会向任何方向滚动。
我尝试将overflow: scroll; -webkit-overflow-scrolling: touch;
添加到body和container的CSS中,但这不能解决问题。
HTML
<body>
<div id="container">
</div>
<body>
CSS
/* General */
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, sans-serif;
}
#container {
width: 10158px;
height: 974px;
background: url(../img/1B.jpg) no-repeat;
-webkit-background-size: 10158px 974px;
}
有人知道怎么解决这个问题吗?是CSS还是JavaScript问题?
提前谢谢。
发布于 2013-06-14 08:15:34
看看这里:
https://github.com/edwilde/iBooks-HTML-Widget-Boilerplate
这是一个专门为iBooks构建的样板,它显然专门针对和修复您的问题。
另一个建议是使用iFrame,如下所示:
<div id="container" style="overflow: scroll; -webkit-overflow-scrolling: touch;">
<iframe width="4000" height="100%" src="">
</iframe>
</div>
发布于 2013-06-12 11:16:11
你有没有在你的脑海中添加一些类似的东西?
meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"
https://stackoverflow.com/questions/16939808
复制