2022.07.20
超簡単!GoogleMapの色をサイトにあわせて変える方法
コーディング
制作
コーディングはさまざまなブラウザ、端末、OSに翻弄されます。
この前はなぜかAndroidだけレイアウトが崩れてしまったので、AndroidにだけCSSを効かせて解決させました。
今回はAndroidにだけCSSを効かせる方法をご紹介します!
以下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をあてて解決しちゃいましょう!
こちらの記事もおすすめ