読者です 読者をやめる 読者になる 読者になる

ど忘れSEの備忘録

日々集めた何かしらを残すための何か。 共有とか疑問解決とかできたらいいな。 iPhoneとかiOSとかその他スクリプトとか色々。

iPhone向けページへの最適化

html

html編集するにあたって、iPhone向けに最適化されたページ幅とかのお話。

headタグ内に

<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0;" />

を記述するだけ。

viewport属性はwindowの解像度を指定できる。
仮想ウィンドウを生成するイメージ。

content属性で指定する値は以下の通り。

プロパティ

初期値

width
(
表示領域の幅)

 

数値

ピクセル数 (20010000

980

device-width

端末画面の幅に合わせる

 

height
(
表示領域の高さ)

 

数値

ピクセル数 (23310000

自動

device-height

端末画面の高さに合わせる

 

minimum-scale
(
最小倍率)

数値

倍率
010 の範囲、初期値は 0.25

0.25

maximum-scale
(
最大倍率)

数値

倍率(010 の範囲、初期値は 1.6

1.6

initial-scale
(
初期のズーム倍率)

数値

倍率
minimum-scalemaximum-scale

 

user-scalable
(
ズームの操作)

yes/no

許可する / しない

yes