ロリポップでスマホだけ表示が古い時の直し方

PCでは新しいページが見えるのに、スマホだけ古い表示のままになることがあります。ロリポップ側の問題に見えても、実際はスマホブラウザ、CSS、アップロード先のどれかで止まっていることが多いです。

スマホだけ古い時の確認順

自分のスマホだけのキャッシュか、スマホ用CSSやFTP上のCSSが古いのかを順番に切り分けます。

自分のスマホだけのキャッシュか、公開ページ全体の問題かを分けます。

スマホ表示だけ古い場合、HTMLではなくCSSが古いことがあります。HTMLで読み込んでいるCSSのURLを直接開き、変更内容が入っているか確認します。

<link rel="stylesheet" href="/assets/css/style.css?v=2.7">

CSSを大きく変えた時は、上のようにバージョン番号を上げると古いCSSを読み続ける問題を減らせます。

PC用のCSSだけ直して、スマホ用の @media の中に古い指定が残っていることもあります。

@media (max-width: 768px) {
  .main-container {
    padding: 1rem;
  }
}

ローカルのCSSを直しても、ロリポップの公開フォルダにあるCSSが古ければ反映されません。FileZillaやWinSCPの右側で、対象CSSの更新日時を確認します。