カテゴリ一覧から記事を探す

AndroidとiOSでCSSのデザインが違う!?特定デバイスだけに対応させるには?

AndroidとiOSでCSSのデザインが違う!?特定デバイスだけに対応させるには?

個人的なページを作っていて、いざデザインを確認するとAndroidとiOSでデザインが違う。どうしたらいいのかわからない!

という疑問を解決できる記事になっています。

先日、個人的なページのデザインが終わり、友達に公開しようかなと思っていました。この時は、まだ罠に気づいていませんでした。

そう、AndroidとiOSではデザインが大きく異なる場合があるのです。
一部の友達(私とは違うOSのスマホを所持)にURLを送ると、ずれにずれたレイアウトの画面のスクリーンショットが返ってきて驚愕しました。

同じ現象に陥る方は少ないと思われますが、もしもそのような方がいれば、助けになれば幸いです。

1.AndroidとiOSでのデザインの違い

どういったところがデザインが違うのでしょうか?

例えば、inputで設定しているボタン。

AndroidとiOSでのデザインの違い

上がiOSで下がAndroid、どちらも全く同じコードなのにこんなにも違う。
(画質が悪いのは編集のせいなので気にしないでください)

デザインにこだわりがある人だと、かなり悩んでしまう内容であるはずです。

私が一番困ったのは、あるタグに:first-lineという疑似要素を入れ込んでいたのですが、iOSだと反映されていませんでした。

最初の行の位置調整をしていたけれど、それのせいで文字が思いっきりずれておりました・・・。

確認できていませんが、他にもそういったiOS(Safari)では効かない疑似要素があるかもしれません。
特にIEでは効かないものが多いので、要チェックです。

それに、margin等で設定した位置がAndroidとiOSで異なる場合もあります。
それぞれでの内部での大きさが違うために起こるようです。(cmとインチの違いに似ている感じです)

2.それぞれのデバイスでの確認方法は?

それぞれのデバイスで違いが本当にあるのかないのか、どうやって見分けるかというと、Androidはchromeでデベロッパーツールを開いて、スマホ画面などにすれば良いです。

開き方は以下の記事を参考にしてください。

iOS側での確認方法に困りました。私はAndroidしか持っておらず・・・。

しかし、Macを所有していたので、Safariを使用してデベロッパーツールを開けばどのようなコードになっているのか、比較ができました。

また、XCodeのアプリを開き、XCode→Open Developer tool→Simulatorを選択すると画面上に仮想iPhoneが出てきますので、そこの画面内にあるSafariのアプリを開いて、該当のサイトに行けば確認することができます。

3.Android/iOS|異なるデバイスでCSSを対応させる方法

異なるデバイスでもCSSを対応させるには、それぞれのデバイスごとにCSSを決めていくのがはやいです。

そのあとに、おかしい部分だけを変更していけばいいです。

javascript
<script>
if (navigator.userAgent.indexOf('iPhone') > 0) {
    let body = document.getElementsByTagName('body')[0];
    body.classList.add('iPhone');
}
 
if (navigator.userAgent.indexOf('iPad') > 0) {
    let body = document.getElementsByTagName('body')[0];
    body.classList.add('iPad');
}
 
if (navigator.userAgent.indexOf('Android') > 0) {
    let body = document.getElementsByTagName('body')[0];
    body.classList.add('Android');
}
</script>

このJavascriptのコードを書き込めば、bodyにiPhoneならiPhone、AndroidならAndroidというクラスが自動で追加されるようになります。

これを使用してCSSをいじるとうまくいきます。

例えば、<div class="example">で指定した場所の位置がずれている場合、CSSでは以下のように書き込めば直ります。

CSS
.iPhone .example{
//ここにiPhone用のCSS
}

.Android .example{
//ここにAndroid用のCSS
}

同じものに対して、iPhone用とAndroid用の2つのコードを指定するということですね。

4.まとめ

まさか、AndroidとiOSで位置ずれが起こったり、もともとのデザインが違うなんて思いもしませんでした。

思わぬ落とし穴にかからぬよう、気づきにくい部分ではありますが気を付けていきたいですね。

ちなみに私はこの落とし穴にかかり、2時間ほどで抜け出したのでした・・・。