散歩リンクにおいて、iPhone/iPadだけ、以下の不具合が発生しました。
- 操作説明で、画面をタップして先に進む操作ができなかった
- 画面レイアウトが崩れていた
その対処でやったことです。
タップが効かない
原因は、 iOS で click イベントがわけのわからない動作をする件について - Qiita を読んで判明しました。まさに、bodyにクリックイベントを設定していました。
解決策として、クリックに反応するための透明のdiv要素で全画面を覆って、そこに先に進むためのクリックイベントを設定しました。
レイアウト崩れへの対応
インターフェースが画面内に収まらないという症状が出ました。多少の画面の狭さならば1画面に収まるレイアウトにしていたのですが、それが機能していませんでした。
iOS 9(iPhone)のSafariでviewportが効かない?ページが縮小表示されたり、挙動がおかしい場合の対策 で、原因と対処方法を発見しました。
iOS9.2からviewportに導入された「shrink-to-fit」項目が悪さをしていました。名前的に「画面にフィットするように縮小する」機能でしょう。これによって、意図した画面設定にならなかったようです。HTMLファイルのHEAD要素内のviewport設定の最後に、以下のように「shrink-to-fit=no」を追加することで治りました。
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no, shrink-to-fit=no" />