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;
}

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

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

こちらの記事もおすすめ

この記事をシェアする

【CSS1行で解決】iPhoneでフォントサイズが大きくなってしまう問題

Photoshopで簡単に白背景を透過させる方法