こんにちは。
HTMLとCSSを変更し、ページを読み込んでも変更したCSSが反映されず非常に困りました。
解決方法と、各ブラウザの挙動についてまとめましたので、備忘録としてここに残します。なお、2020年11月現在です。
前提条件
PCはおまけで調査。Windows10を使用。
スマホはiphone、Androidを使用。各ブラウザとも、アカウントによる同期機能を使用。
調査方法
下記手順とする。
①CSS及びHTML変更前のページを開きブラウザにキャッシュさせる
②ソースコードを最新化する
③ページをリロードする（再読み込み処理）
目次
スマートフォン各ブラウザの挙動表
当然の結果と言えば結果ですが、HTMLを変更していることで、IOSの一部ブラウザは強制的にCSSを読み込みに行き、変更内容が反映されました。
| Android | IOS | |
| Chrome | × | × |
| Firefox | × | 〇 |
| Edge | × | 〇 |
| Safari | – | × |
キャッシュクリアを行います。各ブラウザによって名称が当然違います。
| Android 削除手順 | IOS 削除手順 | |
| Chrome | 履歴-閲覧履歴データの削除-キャッシュされた画像とファイル →変更内容が反映された◎ |
履歴-閲覧履歴データの削除-キャッシュされた画像とファイル →変更内容が反映されない× 履歴-閲覧履歴データの削除-Cookie、サイトデータ →変更内容が反映された◎ |
| Firefox | 設定-閲覧データを削除-画像とファイルのキャッシュ →変更内容が反映されない× 設定-閲覧データを削除-閲覧履歴とサイトデータ →変更内容が反映されない× 設定-閲覧データを削除-開いているタブ →変更内容が反映された ※上から順番に一つずつ実施 |
– |
| Edge | 設定-プライバシーとセキュリティ-閲覧履歴データの削除-キャッシュされた画像とファイル →変更内容が反映された◎ |
– |
| Safari | – | iphoneの設定-Safari-履歴とWebサイトデータを消去 →変更内容が反映された◎ |
AndroidはFirefoxが曲者でIOSはChromeが曲者でした。標準ブラウザを使いましょう。。。
変更直後のソースはキャッシュを読み込ませないようにするためには
HTML5になる前はheaderに
<meta http-equiv="Cache-Control" content="no-cache">
と指定できて、キャッシュに苦労することはあまりなかったのですがHTML5くらいに廃止されました。
そのため、
<link rel="stylesheet" href="style.css?ver=1">
等の意味がないクエリパラメータを付与してあげて、CSSの名前が変更になったようブラウザに誤認識させます。
そうすると強制的に、CSSを読み込んでくれて変更後のページを反映してくれます。