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

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

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

ちょっと原因が分からなくて困ったんですが、いろいろ設定をチェックしたところ、Chromeのデータセーバーが影響していることが分かりました。

参考:Chrome のデータセーバーを使ってデータ使用量を減らす – Android – Chrome ヘルプ

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

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

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

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

 

データーセーバーの設定

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

 

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

 

次に展開したメニューを下にスクロールし[データセーバー]をタップ
datasaver04

 

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