滚动HTML小部件

时间:2013-06-05 12:19:18

标签: css ipad widget dashboard ibooks

我制作了一个背景为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问题?

提前致谢。

2 个答案:

答案 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>