tanaka's Programming Memo

プログラミングについてのメモ。

iPhone/iPadでタップが反応しないこととviewportの不具合対応

散歩リンクにおいて、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" />

持ち越しの項目

最小の画面の高さを320pxで設計していたため、iPhone5以前のスマホでは、横画面で見るときにレイアウトがはみ出す可能性があります。シミュレーター上でははみ出しました。以下、iPhone4のブラウザの描画可能範囲です。

  • 横画面の時 480px, 232px
  • 縦画面の時 320px, 372px

修正にはレイアウトの設計の見直しが必要になるため、今回は持ち越しとしました。以降は、上記のサイズで最小サイズを設計しようと思います。

実機なしでのテスト方法

今回のバグチェックには実機は使わず(持ってないので)、Xcodeに付属のシミュレーターを利用してmac上で行いました。 - XcodeのiOSシミュレータを単体で起動させる方法

以下、起動方法です。

  • [アプリケーション]>[Xcode]右クリック>[パッケージの内容を表示]>[Contents]>[Developer]>[Applications]>[Simulator]で起動

あるいは

  • [Xcode]を起動>[Xcode]メニュー>[Open Developer Tool]>[Simulator]で起動

画面サイズが11インチのmac book airでは足りないので、[Window]>[Scale]で75%や50%など、適度なサイズに縮小すると便利です。