タイトル通り、Webアプリからスマホ用のレスポンシブを設計後、本番環境でサイトを確認すると、レイアウトがローカルとは違ったものになるという問題に遭遇しました。
原因として考えられるもの
一通りググった結果、
・normalize.cssと呼ばれるブラウザ側の環境によらず、同じようにサイトを表示するための機能が既存のcssを削除してしまう
・OSやブラウザのレンダリングモードの違いによって、ファイルパスやcssセレクタの大文字小文字の違いの解釈が異なることにより読み込まれない場合
・修正はされているが、ブラウザに残っているキャッシュが適用されているため、表示が変わっていない
・htmlのheadの読み込み部分で、reset.cssが読み込まれていない。または、読み込む順序に不備がある
・reset.cssにリセットのためのcodeがない
自身のサイトをよく見た結果、input要素とsubmit要素に共通してレイアウト崩れがあるのがわかりました。検証した結果、今回は一番最後のものが原因だとわかりました。
結論
reset.cssにて、リセットしていない設定があったため、ブラウザやバージョンが異なる環境でレイアウトに違いが出ていました。したがってreset.cssの記述を変更することで解決します。
リセットcssのサンプルはこちら
###参考サイト