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

スポンサーリンク

CSSを修正して、AndroidのGoogleクロームで変更後の表示を確認しているときのことです。

確認しているスマホのクロームだけ、CSSが効かないんです。キャッシュを削除してもCSSが効かない。。。別のAndroidのクロームだとCSSが効いている。。。

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

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

簡単にいうとスマホ端末にダウンロードされるデータの容量をGoogleが軽くしてくれる機能です。詳しくはGoogleのヘルプページをご覧下さい

Chrome のライトモードでデータ使用量を抑えてブラウジングを高速化する - Android - Google Chrome ヘルプ
ライトモードを使用すると、モバイルデータの使用量を節約したり、ウェブページの読み込み時間を短縮したりできます。 ライトモードの仕

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

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

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

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

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

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

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

下の画像の右上のボタンをタップしてデーターセーバーの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の変更が反映されます。

参考サイト

WEBサイトの更新時、CSSのキャッシュを自動で読み直す方法
WEBサイトでCSSファイルを書き換えた際に、キャッシュで書き換え後のCSSが表示されない問題についての対策を纏めました。

運営サイトが自作のHTMLの場合

.htmlの拡張子で公開しているWebページの場合、date関数を記述しただけではPHPが実行されません。.htaccessでHTML上でPHPが実行されるよう設定が必要になります。

サンプルコードを以下の記事で紹介しています。

タイトルとURLをコピーしました