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をあてて解決しちゃいましょう！

こちらの記事もおすすめ

[card url=”https://note.spiqa.design/wp/css-browser/”]