iPhoneでCSSが崩れている際の対処法

WEBアプリやサービスの開発において、スマートフォンやタブレットなどでの利用を想定した「レスポンシブデザイン化」はマストです。
しかし、実際にコーディングしてみると、PCでは問題ないのに、スマートフォン(iPhone)ではスタイルが崩れているケースがあります。

この記事では、実際に私が遭遇したケースをもとに、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系ブラウザにおけるiOSデフォルトスタイルの適用を回避できます。

-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で確認してみましょう。

指定したCSSを適用させる事ができました！

#まとめ
指定したCSSのスタイルが、iPhoneで確認すると崩れている場合があります。
その際は、Webkit系ブラウザにおけるデフォルトスタイルの適用を防ぐように指定しましょう。

#参考
・https://sitest.jp/blog/?p=10883
・https://news.mynavi.jp/article/20190331-iphone_why/