iPhoneでWebサイトを見る時にHTML、CSS、jQueryで起こるバグまとめ

公開日:2016.10.21 更新日:2023.10.04

レスポンシブ対応のWebサイトを制作していて、iPhoneのみに起こるバグがいくつかあったので備忘録としてまとめました。
バグというかiPhoneのsafariの仕様ですが。

Androidのchromeで問題なかったとしてもiOSのchromeでは崩れていてなぜ！？と思うこともあるかもしれませんが、これはiOSで使用できるブラウザは全てWebKitで動作しているためです。

したがってiOSのsafariで問題なければiOSの他のブラウザでも問題ないことがおいです。

※参考

目次（読みたい所をクリック!!）

フォントサイズが指定した通りに表示されない

iPhoneでは文字が小さくなりすぎないように勝手に文字サイズが変更されることが有ります
レスポンシブ対応の場合には必要ないのでCSSに-webkit-text-size-adjust: 100%; を追加しましょう。

body {
-webkit-text-size-adjust: 100%; 
}

動的に追加された要素とかだと普通にクリックイベントを登録してもイベントが発生しません。
その場合は以下の様にクリックイベントを登録しましょう。

$(document).on('click', 'p', function () { ... });

ただ、この記述をした場合iPhoneでクリックイベントが発火しませんので以下の記述も追加する必要があります。

p {
  cursor: pointer;
}

クリックイベントの前にタッチイベントが発生し、そこで処理が終了することが原因のようです。

フォームをクリックした際に勝手にズームされてしまう現象はiPhoneの仕様で、font-sizeが16px未満の場合に文字を見やすくするために拡大されるようです。

なので拡大縮小がされていない状況で16px以上に設定すれば拡大されることを防ぐことができます。

ただ、以下例だと注意が必要です。

<meta name="viewport" content="width=640px">

p {
font-size: 30px
}

この場合、320pxの端末でサイトを見た場合font-sizeは15pxで表示されるのでフォームをクリックした際に勝手に拡大されてしまうので注意しましょう。

開発当初からposition:fixed;を使用する予定であれば、jQueryのプラグインiscrollを使用するのも良いかもしれませんが、開発途中でfixedのバグに気づいた場合いくつか要素を変更する必要があるので修正が難しいこともあります。

viewportを固定サイズにしている時に起こるfixedのバグについてはその部分だけ要素のサイズを％表示にすることで表示の崩れを防ぐことができる可能性もあります。

Android、iPhoneともにレスポンシブ対応してないサイトをスマホで見やすいようにするための独自の仕様がいくつかあるので注意したいですね。

ブログ一覧へ