スマートフォンサイトを作るときによく使うhead内のタグ

スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。
スマホサイトを作り慣れていない人の参考になれば嬉しいです。

目次

viewport

ウェブクリップアイコンの設定

iPhone向け（Safari）

viewport

viewportはスマートフォンでの可視領域やズームなどの設定をするmeta要素です。
設定出来る項目としては、width(幅)、height（高さ）、initial-scale（ズームの詳細設定）、minimum-scale（最小縮小比率）、maximum-scale（最小拡大比率）、user-scalable（ズームの有無設定）です。

よくスマホサイトで利用されている設定は以下のようなものです。

        <!--デバイスの横幅に合わせて、拡大縮小はさせず、ズームもさせない設定-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        

詳しくはこちらmeta要素 表示領域を設定する – TAG index。

設定項目

width(幅)

可視領域の幅。
デフォルト値は980pxです。
200pxから10000pxまでの範囲を指定できます。
initial-scale（ズームの詳細設定）ページが可視領域内にフィットするように計算された値がデフォルト値。

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（ズームの有無設定）

ユーザーがズーム操作できるかどうかをyesとnoで指定します。
デフォルト値はyes。
noを指定するとテキスト入力フィールド内でのスクロールも制限されます。

ウェブクリップアイコンの設定

ホーム画面に表示されるアイコンの指定

        <link rel=&apple-touch-icon-precomposed" href="icon.png" />
         ※rel="quot;apple-touch-icon"にするとアイコンの光沢はなしです（iPhone・iPad）
        

アイコンのサイズ

• iPhone 114×114(57×57)
• iPod touch /android 114×114(57×57)
• iPad 144×144(72×72)

※カッコ書きはRetina非対応の旧サイズの場合

iPhone向けSafariでのみ有効な各種設定

全画面表示（yes）

                <!--※デフォルトは「no」になっています。-->
                <meta name="apple-mobile-web-app-capable" content="yes" />
                

ステータスバーのカラー設定

                <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
※default / black /black-translucent　から選択
                

電話番号、メールアドレスのリンクの自動検出設定

                <!-- 自動検出はデフォルトで「on」の状態。telephone=noで「off」に設定できます。-->
                <meta name="format-detection" content="telephone=no" />