【CSS】 iPhoneのみデザインが崩れる問題を解決！

こんにちは！こたです。
最近仕事でサイトを作成していたときにこんな事例に打ち当たりました。

iPhoneだけCSSおかしくない！？！？

もちろんPCのデザインはOKで、ブラウザで見たiPhone画面もOK！
なのに、実機で見るときだけおかしくなってるのです。

この問題を知らなかった場合かなり沼にハマり危険です！
今回はiPhoneのみ起きるデザインの崩れ問題について、解決方法をご紹介します。

解決策はこれだけ！

-webkit-appearance: none;
-webkit-text-size-adjust: 100%;

1 2	-webkit-appearance: none; -webkit-text-size-adjust: 100%;

なんとこの二文を加えるだけで、大体解決します！！
とりあえずデフォルトでこの二文を入れておきましょう。

あれやばい、これだけで記事が終わっちゃう…

解決方法は簡単だけど、なぜこの様なことが起きてしまうか気になりませんか？
では、以下をご覧ください！

デザインの崩れる原因はなに？

iPhoneにはiOSという独自のソフトウェアを使っています。
そのことにより、独自のデフォルトCSSが勝手に表示されてしまうことがあります。

この問題が厄介な理由

・独自のCSSは毎回現れる訳ではないこと

・実機を持っていないと確認できないこと

・デペロッパーツールでは確認できないこと

実機を持っていないと確認できないってなかなか怖いですよね。
テスト環境でいくら調べても対応してる機種で調べてなかったら、本番に流れてしまうし、それが大きな違いだとしたら情報の信用にも関わる。

また、この現象を知らなかった場合、いくらデペロッパーツールで調べても確認できないため、解決できない沼にハマりますので要注意です。

実際に起きた事例

File1: ボタンの形が違う事件

その日ボタンを作成したときに事件は起きました。
いつものようにaタグでボタンを作成していたのですが、その日はいつもとどこか違いました。
そう、CSSが効かないのです！！
なぜ、PCでは表示されているのに！とパニックになった私はかなり動揺し、取り乱してしましました…
あの一文に出会わなければどうなっていたか…考えただけでもゾッとします…