3416 SASHIIRO

暮らしに差し色、ちょっとした変化を。

web制作

スマホで変更したCSSが反映されないときの対処法【記述は絶対間違っていないとき】

投稿日:

スマホで変更したCSSが反映されないときの対処法

サイトのデザインを変えたくてCSSに変更を加えても反映されないときはキャッシュが端末に記憶されていている状態になっている。
ファイル名が同じだと既に見たデータということで端末に残っている以前のCSSデータを読み込んでくる。
PCだとリロードすると解消されることが多いがスマホだと新しいデータがなかなか反映されない。

こんなときの対処方法は2つある。
1.観覧履歴を消してキャッシュを消す
2.CSSファイル名の後ろにクエリを加える

キャッシュを消す

safariやchromeの設定から観覧履歴を消すことで最新のCSSを読んでくれる。
問題点…
・自分だけなら良いけどユーザーはキャッシュのクリアなんてしてくれない
・変更のたびにクリアするのが手間


スポンサーリンク


CSSファイル名の後ろにクエリを加える

hogehoge.cssのうしろに?001など乱数クエリを加えhogehoge.css?001とすると新しいファイルだと認識されて読むようになる。
1度設定を組んでしまえばどの端末でも即時変更が反映されて表示される。
問題点…
・サイト全体に修正が必要
・サイトの表示が毎回CSSを読む分だけ遅くなる

 

使い勝手としてはクエリを加えるの方がいいと感じる。
キャッシュを消すだと他のWebサイトのクッキーとか観覧履歴も消えてしまってるので日常で不便な面がでてくる。







-web制作
-,

関連記事

ワードプレスで特定のタグを非表示にする方法

季節物のタグは時期が過ぎたらあまり必要ないなと思い非表示のやり方のメモです。 クリスマスが過ぎたら次のクリスマスまではそのタグを使って見られることは無さそう…。 必要のなくなったタグをひとまず隠したい …

ファッションイラスト素材1600点を無償提供するカブキストック#CBK stock

ファッションメディア、ECなどコンテンツの足りないピースをイラストで支援 ファッションイラスト素材を無償提供する#CBK stock(カブキストック)。 同サイトに掲載されている素材数は現在1,600 …

漫画制作ソフト CLIP STUDIO 公式ガイドブック!マンガ制作を、基本からしっかりサポート

描き下ろしカバーイラスト:雪広うたこ CLIP STUDIO PAINT EX 公式ガイドブック CLIP STUDIOの発売元である株式会社セルシスが監修した、CLIP STUDIO PAINT E …

WordPressの記事リストを静的ページに導入したらサイトが検索インデックスから消えた

検索上位だった記事がたくさん消えた話 最近、サイトのデザインに修正を加えたり、広告の位置を変更したりサイト全体に関わるUIをいじっていた。そしたら大事なコンテンツがいくつも検索結果から消えていた。 原 …