Cntlog > スキルアップ・ノウハウ > コーディング > スマートフォンサイトを作るときによく使うhead内のタグ

スマートフォンサイトを作るときによく使う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" /> 

関連記事

今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...