PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 (私はありました。) ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考:iPhone版Safariで文字サイズがおかしくなるときは-we
![PC向けサイトがスマホでも崩れないようにする方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e59b00a207099a0de1a5843925778c620a5a031/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UEMlRTUlOTAlOTElRTMlODElOTElRTMlODIlQjUlRTMlODIlQTQlRTMlODMlODglRTMlODElOEMlRTMlODIlQjklRTMlODMlOUUlRTMlODMlOUIlRTMlODElQTclRTMlODIlODIlRTUlQjQlQTklRTMlODIlOEMlRTMlODElQUElRTMlODElODQlRTMlODIlODglRTMlODElODYlRTMlODElQUIlRTMlODElOTklRTMlODIlOEIlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg5Yzc0M2YyZjczY2U4YjdkZjk5Nzk1Y2ZlYWM3MWZl%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc3Vrb2J1dG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM2YWJkOWQxODg2YWFkY2I3MzFkMTJlNGNlNDVmN2Y1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De8924c3f7d91b815645af39cb64d34eb)