【ブログ運営】viewportって何だ?
2018/10/08
サイトを色々作っていくといろいろな単語が新しく使われます。
意外と知っていない単語、気になる単語をまとめてみました。
viewport・ビューポート
PC専用のWeb画面をスマホで見ると、どこを基準に見れば良いか分からなくなります。
この表示仕切れない部分をスマホ・タブレットではどのように表示するかを指定する方法です。
「スマホの画面を横幅420としてWebページの一部分を表示させろ」とか、「スマホの横幅に合わせてWebページ全体を縮小表示しなさい」などの表示方法を指定する方法です。
対策
metaタグでviewport・ビューポートを指定することができます。
<meta name="viewport" content="...">
こんなタグを<HEAD>の中に入れればよいです。
広告
metaタグのパラメータ
viewportの要素(パラメータ)は二つ
width=:
device-width:デバイスの横幅に合わせる
320等の数値:液晶の大きさを320ピクセルととして表示しろ
initial-scale=:
拡大・縮小の倍率の指定
結局の所、viewportの設定方法は
<meta name="viewport" content="width=device-width,initial-scale=1"> というタグを<HEAD>内に埋め込めば解決する。 広告
参考資料
iPhone 6(約4.7インチ),iPhone 6s(約4.7インチ):750×1334(ピクセル)
Xperia Z3(約5.2インチ):1920×1080(ピクセル)
Nexus 6(約5.9インチ):2560×1440(ピクセル)
ZenFone 2(約5.5インチ):1920×1080(ピクセル)
iPad 3,iPad 4,iPad Air,iPad Air : 1536×2048(ピクセル)
広告