レスポンシブサイトにおけるhead内の設定。

電話番号,メールアドレスの自動リンク制御

スマートフォンにはサイト上に表示された電話番号の数字をクリックすると自動的に通話アプリを起動する機能がありますが
電話番号以外の数字(郵便番号、IPアドレスなど)をクリックしても自動に起動してしまうのをmeta要素、format-destectionを使用する事で制御、起動を無効化できます。

<meta name="format-detection" content="telephone=no,email=no">

ただ、これだと本当の電話番号までが無効リンクとなるため、対象となる数値をa要素で囲むことで
個別に有効リンクにする必要があります。

<meta name="format-detection" content="telephone=no,email=no">
(中略)
<p>電話番号：00-000-0000</p>←無効
<p>Tel:<a href="tel:00-000-0000">00-000-0000</a></p>←有効

ホームアイコン画像の設定

モバイルデバイス(iPhone,iPadなど)のホーム画面にWebサイトのショートカットアイコンを登録すると
通常はそのページのサムネイルが表示されますが、link要素を使うことで
任意のアイコン画像を登録できるようにします。

アイコンの画像サイズはデバイスのによって異なりますが、大きなサイズの画像を用意しておけば端末の方で自動的に縮小してくれます。
例えば「iPad-iOS7(Retina)」のホーム画面アイコンが152x152サイズですのでその時における最も大きなサイズを用意しましょう。

<link rel="apple-touch-icon" href="img/home_icon.png">←ハイライト付き
<link rel="apple-touch-icon-precomposed" href="img/home_icon.png">←ハイライト無し

head要素内に記述する要素の記述順番

モバイルデバイスはデスクトップよりも通信環境が遅い場合があるので通信速度の高速化を意識した
記述をする。

head要素内の記述順番
１,title要素やmeta要素はhead要素の開始直後。またmeta要素の文字コード指定は、HTMLソース内の全角文字よりも先に記述する必要があるため上記のtitle要素や他のmeta要素よりも先に記述する。
２，cssファイル、jsファイル以外のlink要素（<link rel="apple-touch-icon" href="img/home_icon.png">など)
３，cssファイルを読み込むlink要素
４，jsファイルを読み込むlink要素