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

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

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

※参考

• safari→WebKit
• Google Chrome→Blink
• Firefox→Gecko

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

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

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

参考
iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する

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

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

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

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

p {
  cursor: pointer;
}

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

参考
http://qiita.com/38kun/items/ce6a26c9c59612e6f515

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

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

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

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

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

p {
font-size: 30px
}

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

参考
http://webdev.jp.net/iphone-forcus-zoom-dissolve-user-scalable/

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

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

参考
http://javascript.webcreativepark.net/library/iscroll

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

まとめ

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