4

我制作了一个具有 4000 像素宽背景的网页，并且在 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 问题？

提前致谢。

4

2 回答 2

1

看看这里：

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="">
&lt;/iframe>
</div>
于 2013-06-14T08:15:33.933 回答
0

你有没有在你的脑海中添加类似的东西？
元名称=“视口”内容=“初始比例= 1.0，最大比例= 1.0”

于 2013-06-12T11:16:11.120 回答