お気楽温泉ブログ

お気楽温泉管理者が作るいろいろなブログです

*

【ブログ運営】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(ピクセル)

 

最後までお読み頂きありがとうございました

広告

 - 雑談=インターネット・ブログ