WEBアプリケーションの開発において、スマートフォンやタブレットでの使用を想定したレスポンシブデザイン化はマストです。
しかし、実際にコーディングしてみるとPCでは問題ないのに、スマートフォンで確認してみるとスタイルが崩れているケースがあります。
この記事では、実際に私が遭遇したケースをもとに、CSSで指定したスタイルがiPhone上で反映されていない際の対処法について紹介します。
ボタンのスタイルが崩れている
以下のようなコードで、新規登録画面における入力内容の送信ボタンを設置しました。
HTML
<input type="submit" value="新規登録">
CSS
.form input[type="submit"] {
cursor: pointer;
color: white;
background-color: #fa6d1b;
font-weight: 300;
width: 140px;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 0;
float: right;
}
PCで確認すると、このようなボタンを設置できています。
しかし、iPhoneで確認してみると...
スタイルが崩れている...
原因
これは、input要素に対してiOSのデフォルトスタイルが適用されてしまっていることが原因です。
iPhoneやiPadなどiOSで動作するブラウザにはWebkit(Apple製)というレンダリングエンジンが使用されています。
このWebkit系ブラウザには、あらかじめデフォルトのスタイルが当てられているため想定したCSSスタイルが反映されない場合があるというワケです。
対処法
CSSの該当箇所にて、iOSデフォルトスタイル適用を防ぐよう指定することで、想定したスタイルを反映させる事ができます。
以下のコードで、Webkit系ブラウザにおけるデフォルトスタイルの適用を回避できます。
-webkit-appearance: none;
CSS
.form input[type="submit"] {
cursor: pointer;
color: white;
background-color: #fa6d1b;
font-weight: 300;
width: 140px;
border-radius: 5px;
margin-top: 15px;
margin-bottom: 0;
float: right;
-webkit-appearance: none; --------追加--------
}
再度iPhoneで確認してみましょう。
PCで確認したものと同様のスタイルにする事ができました！
まとめ
以上のように、PC上でCSSのスタイルが問題なく反映されていても、iPhone上で確認すると崩れている場合があります。
その際は、Webkit系ブラウザにおけるデフォルトスタイルの適用を防ぐように指定しましょう。
参考
・https://sitest.jp/blog/?p=10883
・https://news.mynavi.jp/article/20190331-iphone_why/
↧