CSS JavaScript

2022.02.03

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

    【CSS】グーやパーに変形!マウスカーソルに掴む動作を実装する方法

    CSS

  • 2022.02.08

    チェックボックスで1つしかチェックさせない方法

    HTML5

    JavaScript

  • 2022.01.24

    効率的なCSS記述になる!inherit の使い方

    CSS

おすすめ記事

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    その他

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.10.28

    mac bookで使える!おすすめBluetoothキーボード3選

    その他

WPサービス

×