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

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

iphone7katate_tp_v

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

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

参考

なぜかiPhoneでサイトを見たときだけ文字サイズがおかしくなるときは、文字サイズの自動調整が効いているせいかも。

Jqueryのクリックイベントが効かない

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

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

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

参考

iPhone や iPad などでも、 JavaScript の click イベントは基本的に有効です。 しかし、これらのデバイスで click イベントを拾おうとすると、うまくいかないことがあります。 このあたり、結構わけのわから...

フォームをクリックした時に勝手にズームされてしまう

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

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

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

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

参考

iOSのSafariには、 フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという ありがた迷惑な独自仕様があります。 (ダブ

ピンチインをした際にposition:fixed;で設定していた箇所のレイアウトが崩れる

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

参考

iPhone / iPadなどでposition: fixedが利用できる「iScroll」についての解説です

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

まとめ

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

シェアする

  • このエントリーをはてなブックマークに追加