AndroidのクロームでCSSが効かないときにチェックした設定

CSSを修正して、ブラウザで変更後の表示を確認しているときのことです。

AndroidスマホのChromeだけ、CSSが効かないんです。キャッシュを削除してもCSSが効かない。。。

スマホの実機はいくつか持っていて、別のスマホのChromeで確認するとCSSが効いている。。。

ちょっと原因が分からなくて困ったんですが、いろいろ設定をチェックしたところ、Chromeのデータセーバーが影響していることが分かりました。
(現在は、ライトモードという名称に変わっています)

データセーバー(ライトモード)ってどんな機能?

簡単にいうとスマホ端末にダウンロードされるデータの容量をGoogleが軽くしてくれる機能です。

詳しくはヘルプページをご覧下さい

support.google.com

この機能の影響なのか、変更したCSSがリアルタイムで反映されないことがあるようです。

このデータセーバーをオフにしたところ、すぐにCSSが効くようになりました。

サイトの変更を実機のブラウザで確認する場合、データセーバーのような機能は邪魔になる場合があるので、オフにしたほうがいいのかもしれません。

データーセーバー(ライトモード)の設定

Chromeを起動して右上の縦に3つ並んだ黒丸をタップ
datasaver01

展開したメニューから[設定]をタップ
datasaver02

次に展開したメニューを下にスクロールし[ライトモード]をタップ

下の画像の右上のボタンをタップしてデーターセーバーのONOFFを切り替えます

ライトモードの設定をオフにしたくない場合

ライトモードをそのままにする場合は、修正するサイト側のHTML、CSSのパスにパラメータを付けて対応すると良いと思います。

下の記事で、解決法を書いています。

https://m630.net/3389

CSSのパスに付けたパラメータをPHPで可変させて、常に新しいCSSとして読み込むことでキャッシュの影響を受けない方法です。