このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

スマートフォン最適化 「viewport」

この記事は最終更新日から1年以上が経過しています。

最適化に必須の表示制御タグ「viewport」

「viewport」というmeta要素の属性を使って、表示制御できる。

「viewport」で指定出来る属性

width : viewportの横幅

height : viewportの縦幅
initial-scale : 倍率の初期値
minimum-scale : 倍率の最小値
maximum-scale: 倍率の最大値
user-scalable : 拡大縮小の可否
例:

<meta name="viewport" content="width=500" />

<meta name="viewport" content="width=device-width" />

数値以外にもデバイスの幅、高さという指定も可能

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.5,maximum-scale=3" />

拡大縮小指定する場合は、カンマで区切り複数指定する。

初期倍率100% 拡大、縮小は50%〜300%

<meta name="viewport" content="width=device-width,user-scalable=no" />

拡大縮小を許可しない場合

Related Article

LATEST NEWS

RANKING

ARCHIVE

SPONSOR

現在、掲載募集中です。



Links

現在、掲載募集中です。



About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。