スマホで変更したCSSが反映されないときの対処法
サイトのデザインを変えたくてCSSに変更を加えても反映されないときはキャッシュが端末に記憶されていている状態になっている。
ファイル名が同じだと既に見たデータということで端末に残っている以前のCSSデータを読み込んでくる。
PCだとリロードすると解消されることが多いがスマホだと新しいデータがなかなか反映されない。
こんなときの対処方法は2つある。
1.観覧履歴を消してキャッシュを消す
2.CSSファイル名の後ろにクエリを加える
キャッシュを消す
safariやchromeの設定から観覧履歴を消すことで最新のCSSを読んでくれる。
問題点…
・自分だけなら良いけどユーザーはキャッシュのクリアなんてしてくれない
・変更のたびにクリアするのが手間
CSSファイル名の後ろにクエリを加える
hogehoge.cssのうしろに?001など乱数クエリを加えhogehoge.css?001とすると新しいファイルだと認識されて読むようになる。
1度設定を組んでしまえばどの端末でも即時変更が反映されて表示される。
問題点…
・サイト全体に修正が必要
・サイトの表示が毎回CSSを読む分だけ遅くなる
使い勝手としてはクエリを加えるの方がいいと感じる。
キャッシュを消すだと他のWebサイトのクッキーとか観覧履歴も消えてしまってるので日常で不便な面がでてくる。
