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

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

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

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

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

データセーバー（ライトモード）ってどんな機能？

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

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

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

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

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

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

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

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

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

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

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

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