CSSを修正して、AndroidのGoogleクロームで変更後の表示を確認しているときのことです。
確認しているスマホのクロームだけ、CSSが効かないんです。キャッシュを削除してもCSSが効かない。。。別のAndroidのクロームだとCSSが効いている。。。
ちょっと原因が分からなくて困ったんですが、いろいろ設定をチェックしたところ、クロームのデータセーバーが影響していることが分かりました。
（現在は、ライトモードという名称に変わっています）
データセーバー（ライトモード）ってどんな機能？
簡単にいうとスマホ端末にダウンロードされるデータの容量をGoogleが軽くしてくれる機能です。詳しくはGoogleのヘルプページをご覧下さい
この機能の影響なのか、変更したCSSがリアルタイムで反映されないことがあるようです。
このデータセーバーをオフにしたところ、すぐにCSSが効くようになりました。
サイトの変更を実機のブラウザで確認する場合、データセーバーのような機能は邪魔になる場合があるので、オフにしたほうがいいのかもしれません。
データーセーバー（ライトモード）の設定
Chromeを起動して右上の縦に3つ並んだ黒丸をタップ
展開したメニューから[設定]をタップ
次に展開したメニューを下にスクロールし[ライトモード]をタップ
下の画像の右上のボタンをタップしてデーターセーバーのONOFFを切り替えます
ライトモードの設定をオフにしたくない場合
ライトモードをそのままにする場合は、修正するサイト側のheadタグ区間の、CSSのパスにパラメータを付けて対応すると良いと思います。
CSSを読み込むのにheadタグ区間に以下のようなHTMLを記述するかと思います。
<link rel="stylesheet" href="/styles.css" type="text/css">
このlink要素内のhref属性で、読み込むCSSファイルのパスを記述するんですが、これにパラメータを付けます。
<link rel="stylesheet" href="/styles.css?190522-1809" type="text/css">
コード内のstyles.css?190522-1809がパラメータを付けた状態です。?の後の値は半角英数字なら何でも良いです。
この記述で、リロードする際にブラウザ側で新しいCSSファイルとしてキャッシュするので、変更内容がサイトに反映されます。
ただ、このやり方の場合、CSSを変更するたびに、パラメータの値を変えないといけないので手間がかかるのがデメリットです。
PHPのdate関数でパラメータの値を自動更新する
以下のようなコードをheadタグ区間に記述することで、date関数により、パラメータの値が1分ごとに更新されます。
<link rel="stylesheet" href="/styles.css?<?php echo date('ymd-Hi');?>;" type="text/css">
1分ごとに値が新しくなるので、都度、キャッシュされることになり、CSSの変更が反映されます。
参考サイト
運営サイトが自作のHTMLの場合
.htmlの拡張子で公開しているWebページの場合、date関数を記述しただけではPHPが実行されません。.htaccessでHTML上でPHPが実行されるよう設定が必要になります。
サンプルコードを以下の記事で紹介しています。
