作り方・基本

スマートフォンサイトの作り方

PC向けのサイト制作とは共通点が多く、スマートフォンのWebブラウザはフルブラウザです。

HTML5、CSS3を駆使したコーディングがこれからは基本になります。

スマートフォン専用サイトでiPhoneとAndroidに対応させる場合
画面サイズの目安は、
縦：幅320 px×高さ480px
横：幅480 px×高さ320px

viewportを使う

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

width(幅)

デフォルト：980px

200px　～　10000px

height(高さ)

デフォルト：widthの値とデバイスのアスペクト比

233px　～　10000px

initial-scale（ズームの詳細設定）

ページが可視領域内にフィットするように計算された値がデフォルト値

minimum-scaleからmaximum-scaleによって定義された範囲の値

最初にページが表示されるviewportの値のみが指定可能

user-scalableにnoを指定していなければズーム操作が可能

ズームの範囲はminimum-scaleとmaximum-scaleの範囲内に制限される

minimum-scale（最小縮小比率）

viewportの最小scale値

デフォルト：0.25

0　～　10.0

maximum-scale（最小拡大比率）

viewportの最大scale値

デフォルト：1.6

0　～　10.0

user-scalable（ズームの有無設定）

viewportの最大scale値

デフォルト：1.6

0　～　10.0