Androidだけ崩れる!AndroidにだけCSSを効かせる方法

コーディングはさまざまなブラウザ、端末、OSに翻弄されます。

この前はなぜかAndroidだけレイアウトが崩れてしまったので、AndroidにだけCSSを効かせて解決させました。

今回はAndroidにだけCSSを効かせる方法をご紹介します!

JSでAndroid端末を判別してbodyにクラスを指定する

以下JavaScriptをコピペします。

if (navigator.userAgent.indexOf('Android') > 0) { 
let body = document.getElementsByTagName('body')[0]; 
body.classList.add('Android'); 
} 

内容としては、Android端末だったらbodyタグにAndroidクラスを指定するという記述が書かれています。

そうすると、Android端末で見た時にbodyタグがつきます。

あとは以下のようにスタイルを指定すればAndroidにだけCSSを適用できるわけです。

body.Android .test {
  color: #red;
}

AndroidにだけCSSを効かせる方法まとめ

ちなみにこういうブラウザや端末ごとにCSSを適用させるテクニックのことをCSSハックといいます。

不具合で時間を食うのはもったいないので、しばらく調査してわからなければCSSハックを使って独自のCSSをあてて解決しちゃいましょう!

こちらの記事もおすすめ

この記事をシェアする

関連記事

  • 2022.09.15

    【初心者向け】アクセス解析の用語をまとめて解説!

    ディレクション

    制作

  • 2022.09.13

    Web広告とは?Web広告の基礎知識やメリットを紹介!

    ディレクション

    制作

  • 2022.09.08

    この世界はコードでできている#2

    コーディング

    その他

    制作

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×