2022.07.20
Chromeで画像やテキストがぼやけるときの対処法
コーディング
制作
コーディングはさまざまなブラウザ、端末、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をあてて解決しちゃいましょう！
こちらの記事もおすすめ
この記事をシェアする
株式会社スピカデザイン
https://spiqa.design/
spiqa_design