HTML/CSS
viewportにピクセル指定するとAndroidで拡大表示される問題
スマホ向けサイトを作っている場面において、
デザインが固定幅とすると、viewportにdevice-widthではなくピクセル指定したい場合があります。
1 |
<meta name="viewport" content="width=750"> |
とするとうまくいくのですが、
ピンチによる拡大縮小を禁止したい場合、user-scalable=noをつけます。
1 |
<meta name="viewport" content="width=750,user-scalable=no"> |
iOS端末はこれで問題ないのですが、
Android端末において拡大表示される(画面がはみ出る)問題が出てしまいます。
そこで、Android向けにもう一つ属性を追加します。
1 |
<meta name="viewport" content="width=750,user-scalable=no,target-desitydpi=device-dpi"> |
とすることで端末横幅にきっちり収まるようになります。