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

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

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

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

解決策はこれだけ！

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

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

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

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

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

この問題が厄介な理由

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

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

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

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

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

実際に起きた事例

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

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

このようにボタンの形が違う場合も稀に起こります。

解決方法

File2: 勝手に文字が巨大化事件

テーブルタグで事件は起きました。

そのサイトは2つのテーブルタグをサイトに設置しました。
どれもコピペで作成したので、文言以外違いはありません。
なのに、最後のテーブルだけ文字が巨大化していたのです。
デペロッパーツールで調べても証拠は出てきませんでした。
謎は迷宮入りするところでした…
あの一文に出会うまでは

解決方法

以上の様にどんなデザインの崩れが起きるか分からないのが怖いところです。

まとめ

実機での確認を確実にすることが重要ですが、あの一文を頭の隅に入れておくと、いざという時に役立ちます。
１つでも多く未解決事件を解決してスッキリさせてほしいですね。
では、また！