こんにちは。
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を読み込んでくれて変更後のページを反映してくれます。