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" /> 

関連記事

【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...