質問: ### したいこと jQueryのライブラリである「turn.js」でページめくりのUIは実装できたのですが、 スマホ表示が極端に小さく上下に無用な空きができてしまいます。 PCはこのままでスマホ表示を最適化させるには どうすれば良いかご教授いただければと思います。 ### PC表示(いけてる方) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/44080e7cb0d6f4d8aa4cad956d9a8a92.png) ### スマホ表示(いけてない方) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f4cc242c28ca5b03ece290724f908395.png)
回答: 画面サイズの判断は別の実装が必要とはなりますが、オフィシャルマニュアル http://www.turnjs.com/turnjs4-api-docs.pdf から引用します。 Display The display defines how many pages are visible in the flipbook. While using turn.js on an iPad or iPhone, there would be some problems to turn pages if the orientation of the device is portrait. For that reason, turn.js introduces a new view called single. There are two views: double, which shows two pages and single, which shows only one page. なので $(‘#flipbook’).turn(display: 'single'); として、1ページにするらしいです。 オプションは他にあるようなので案は様々かと思います。