iphoneを使う機会が無かったので気が付きませんでしたが、iphoneでページを見ると、スマホを縦にした時は問題ありませんが、横にすると、画面が異常に拡大されていました。そこで、この対策をしたので、書き留めておきます。
今まで適用していたviewportの設定
今まではviewportを次のように設定していました。
<meta name=viewport content="width=device-width">
新たに設定し直したviewport
<meta name=viewport content="width=device-width, initial-scale=1">
つまり、メタタグのviewportにinitial-scale=1を追加指定しただけです。この変更だけで、確認した限り全てのスマホで、縦で見ても横で見ても問題無く表示できるようになりました。それ以外のviewportの設定はいじる必要はありません。
グーグルのページスピードインサイトのページでも、この設定は推奨されているようでした。早く気が付けば良かったのに。
