CSSを修正して、ブラウザで変更後の表示を確認しているときのことです。
AndroidスマホのChromeだけ、CSSが効かないんです。キャッシュを削除してもCSSが効かない。。。
スマホの実機はいくつか持っていて、別のスマホのChromeで確認するとCSSが効いている。。。
ちょっと原因が分からなくて困ったんですが、いろいろ設定をチェックしたところ、Chromeのデータセーバーが影響していることが分かりました。
（現在は、ライトモードという名称に変わっています）
データセーバー（ライトモード）ってどんな機能？
簡単にいうとスマホ端末にダウンロードされるデータの容量をGoogleが軽くしてくれる機能です。
詳しくはヘルプページをご覧下さい
Chrome のライトモードでデータ使用量を抑えてブラウジングを高速化する - Android - Google Chrome ヘルプ
ライトモードを使用すると、モバイルデータの使用量を節約したり、ウェブページの読み込み時間を短縮したりできます。
ライトモードの仕
support.google.com
この機能の影響なのか、変更したCSSがリアルタイムで反映されないことがあるようです。
このデータセーバーをオフにしたところ、すぐにCSSが効くようになりました。
サイトの変更を実機のブラウザで確認する場合、データセーバーのような機能は邪魔になる場合があるので、オフにしたほうがいいのかもしれません。
データーセーバー（ライトモード）の設定
Chromeを起動して右上の縦に3つ並んだ黒丸をタップ
展開したメニューから[設定]をタップ
次に展開したメニューを下にスクロールし[ライトモード]をタップ
下の画像の右上のボタンをタップしてデーターセーバーのONOFFを切り替えます
ライトモードの設定をオフにしたくない場合
ライトモードをそのままにする場合は、修正するサイト側のHTML、CSSのパスにパラメータを付けて対応すると良いと思います。
下の記事で、解決法を書いています。
iphone4・5・Xの実機で変更したCSSが反映されないときの解決法
運営サイトのCSSの変更を確認しようと、iphone4・5・Xと3種類の実機で表示を確認したところ変更が全く反映されませんでした。
いろいろ試して、上手く行った解決法と参考サイトを紹介します。
解決法は、読み込むCSSのパスにパ...
m630.net
2019.05.22
CSSのパスに付けたパラメータをPHPで可変させて、常に新しいCSSとして読み込むことでキャッシュの影響を受けない方法です。
