0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

viewportで気になった点があったので、改めてviewportを学んでみた

Last updated at Posted at 2018-08-22

viewportに触れる機会があり、少し手こずったので
改めて学んでみました。

viewport=サイトをスマートフォンサイズに合わせるときに使う。

日本語では「表示領域」という言葉がしっくりくるらしい。

width,height共に200px-10000pxまで指定できる、
デバイス幅に合わせるdevice-width,device-heightがある。

initial-scale(初期倍率)
初期値は1倍

minimum-scale(最小倍率)
初期値は0.25倍

maximum-scale(最大倍率)
初期値は1.6倍

user-scalable(ユーザーのズーム操作の可否)
ユーザー側でズームできるようにするかできないように
指定できる。初期値はyes(1)。
ズームさせない場合はno(0)を指定する。

この形が一番見る形ではないでしょうか。
スクリーンショット 2018-08-22 16.30.38.png

MonacaではAndroidやios専用のviewportの
指定ができたりします。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?