新しいブラウザで表示が崩れるのはなぜ？

公開日 2026/8/2 最終更新日 2026/8/3

問題を即時に解決したいと言う方は対処法まで飛んで下さい！

経緯

事の経緯は、数日前にiPhone8からiPhone17eに機種変更をしてからになります。自分のブログをチェックしていると表示が崩れている状態。

キャッシュの問題かなと思いキャッシュを消去

解決しない…

iPhone8で確認すると問題なし、デベロッパーツールでも問題なし

なぜ？

すると新しいAndroid端末に替えた人から表示が変との情報

ありがたい情報です！

こちらのコードをbodyの所に入れて下さい。

body {
	-webkit-text-size-adjust: 100%;
  	text-size-adjust: 100%;
}

・text-size-adjust: 100%;

ブラウザが勝手にフォントサイズを自動調する機能をオフにして、本来の100％（指定したサイズ）で表示させます。

・-webkit-text-size-adjust: 100%;

古いブラウザ用の互換性を保つための記述です。

2025年から新しい端末（iOS）やブラウザ（Safari）で『画面が広くなったので文字を大きく読みやすくしてあげよう』と自動で文字のサイズを大きくしてくれる機能があります。

この機能が入ると、デザインやレイアウトが崩れてしまう原因になります。

今回はbodyの中に入れましたがリセットCSSに入れる事も重要です。

以上、新しいブラウザで表示が崩れるのはなぜ？でした。小さな疑問でも下記のURLにお問い合わせ下さい。

ポートフォリオサイトはこちらになります。

タグ