Dolly's BLOG

K's OutdoorのサイトをiPadからアクセスすると、立ち上がる画面ではサイトの右側が切れちゃうようになっていた。これはトップページの画面が921pxあるのに、iPad (正確にはiPad Air2)の表示画面幅が768pxであることに起因していることはわかっていた。いつか修正しようと思ってはいたが、修正方法がわからなかったの放置していたもの。 たまたまレスポンシブデザインのサイトを見ていたら、簡単に修正できる方法を発見。
レシポンシブデザインにする際、かならずmetaタグで"viewport"の設定をする。この場合、
<meta name=viewport content="width=device-width, initial-scale=1">　と書くのが定番。
ここから、 initial-scale=1を削除するだけではみ出さなくなる。最初に表示する倍率を指定しているわけだが、ここで１を設定しているのではみ出すわけだ。これを削除すると、自動で丁度良い幅にリサイズされて表示される。PCもスマホにも悪影響もなし。これが正しいのかどうかよくわからないが、今の時点で気になる弊害はなし。