我制作了一个背景为4000px的网页,在Windows,Mac和iPad上的Chrome和Safari中它滚动得很好。我可以滚动到左侧,上方和右侧,没有任何问题,就像您期望的那样。
但是当我将此页面转换为.wdgt格式时,将其导入iBooks并在iPad上预览(4)页面将不会向任何方向滚动。
我已尝试将overflow: scroll;
-webkit-overflow-scrolling: touch;
添加到正文和容器的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问题?
提前致谢。
答案 0 :(得分:0)
你是否添加了类似的内容? meta name =“viewport”content =“initial-scale = 1.0,maximum-scale = 1.0”
答案 1 :(得分:0)
看看这里:
https://github.com/edwilde/iBooks-HTML-Widget-Boilerplate
这是专为iBooks构建的样板,显然是针对iBooks的目标。具体解决你的问题。
另一个建议是使用iFrame,例如:
<div id="container" style="overflow: scroll; -webkit-overflow-scrolling: touch;">
<iframe width="4000" height="100%" src="">
</iframe>
</div>