質問

I've made a webpage that has an 4000px wide background and in Chrome and safari on Windows, Mac and iPad it scrolls nice. I can scroll to the left, the top and the right with no problems, just like you would expect it to be.

But when I convert this page to .wdgt-format, import it into iBooks and preview it on the iPad (4) the page will not scroll in any direction.

I've tried adding overflow: scroll; -webkit-overflow-scrolling: touch; to the CSS of the body and the container but this won't fix the problem.

The HTML

<body>
<div id="container">
</div>
<body>

The 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;

}

Does anyone know how to solve this? Is it a CSS or a JavaScript problem?

Thanks in advance.

役に立ちましたか？

解決

Have a look here:

https://github.com/edwilde/iBooks-HTML-Widget-Boilerplate

This is a boilerplate specifically for building for iBooks, which apparently targets & fixes your problem specifically.

Another suggestion would be using an iFrame, something like:

<div id="container" style="overflow: scroll; -webkit-overflow-scrolling: touch;">
    <iframe width="4000" height="100%" src="">
</iframe>
</div>

他のヒント

Have you added in your head something like?
meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0"

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top