レスポンシブデザインのトラブル対策

フォントが大きくなる時の対処法

フマートフォンの画面サイズによってはフォントが大きくなってしまう事があるようです。
この場合は以下のように指定すると改善されると思います。

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

フォームの自動拡大機能を無効化する方法

フォームの自動拡大機能を無効化したい場合は、フォームのHTMLページにあるビューポートの最後に以下を追加してください。
メールフォームや検索フォームは入力する際に自動で拡大されますが、自動では元に戻らないブラウザもあるためこうした対策が必要なようです。
なお、「user-scalable=no」でも同様の設定が可能ですが、こちらはW3Cで非推奨となっています。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">

横にズレる時の対処法

横にズレる時の対処法1

モバイル端末で閲覧する時に、指で動かすとサイトが横にズレる場合の対処法です。
この場合はモバイル用のレスポンシブコードで、以下のように指定します。
bodyの横幅を端末のサイズに合わせるため100%とし、paddingやmarginなどによるずれを防ぐためにbox-sizing:border-boxを指定します。
また、この指定をしてもまだズレる場合は、paddingやmarginなどでズレ現象を起こしている要素に対してbox-sizing:border-boxを指定する必要があります。

body {width:100%;height:auto;box-sizing:border-box;}

横にズレる時の対処法2

もう一つはズレるページの子要素をwidth:100%;にする方法です。
レスポンシブで徐々に横幅が小さくなりますが、その時に横幅がギリギリだとオーバーしてズレる原因になります。

子要素 {width:100%;}