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.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2022.11.15

    Wordpressで多言語対応をする方法

    コーディング

    制作

  • 2022.10.24

    超簡単!?たった15分でカウントダウンを作成する方法

    コーディング

    制作

おすすめ記事

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

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

    2022.06.01

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

    デザイン

    制作

×