6章. レスポンシブサイトに必要なmeta要素

meta name=”viewport” content=”width=device-width,initial-scale=1″

この設定は、CSSファイル内で設定されている幅の最大値がデバイスの幅に収まるようにリサイズされます。
PCサイトのみでも、この設定を入れると自動縮小され、横スクロールがでなくなります。
詳細な設定も可能ですが、デバイスに収まるようにするだけであれば、この設定のみで問題ありません。
ただし、iPadの場合、まれに横スクロールが発生します。
その場合は、CSSファイルに下記のコードを追加することで回避が可能です。
min-widthプロパティの値は、表示させたい幅の最大値を設定します。
サンプルサイトの場合、960pxが幅の最大値ですが、左右に20pxの余白を設定したいので1000pxに設定してあります。

@media only screen and (min-width: 768px){
  body {
    min-width: 1000px;
  }
}

meta https-equiv=”X-UA-Compatible” content=”IE=edge”

この設定は、レスポンシブサイトで必須の設定ではありません。
これは、Internet Explorerの機能である旧バージョンで表示させる「下位互換モード」を強制的にそのInternet Explorerの最新モードで表示させる設定です。
HTML5やCSS3が使えるバージョンであっても下位互換モードが使われていると表示に崩れが発生しますので、その回避として設定しておきます。
Internet Explorer独自の設定ですので、HTML5 Lintでは、エラーが発生しますが、無視してもかまいません。

meta name=”format-detection” content=”telephone=no”

iPhoneの場合、数字の羅列があると電話番号の自動リンク機能が働く場合があります。
電話番号の自動リンク機能は、タップすることで電話がかけられる便利な機能です。
ただし電話番号であれば問題ありませんが、電話番号でない数字に自動リンクが発生する場合があります。
このコードは自動リンク機能を停止させるコードです。
電話番号がないサイトは、この後の設定は不要です。

電話機能を使う場合は、下記のように個々のaタグに設定します。
href属性のtel: の後に電話番号を記述します。
※ハイフンは、有り無しどちらでも対応します。

<a href="tel:09011112222">09011112222</a>
<a href="tel:090-1111-2222">090-1111-2222</a>

また、PCから電話することはできませんので、CSSでカーソルをデフォルトに変更し、リンクに見えないように設定します。
下記は属性セレクタでhref属性の値の先頭にtelがある場合のみ、カーソルをデフォルトにする指定です。

@media only screen and (min-width: 768px) {
  a[href^="tel"] {
    cursor: default;
  }
}

デバイスごとにJavaScriptを切り替える

TELリンクは、PCでもリンクが有効になるブラウザがあります。
例えばInternet Explorerはクリックするとページ変移が発生します。
TELリンクの無効化にはjQueryまたはJavaScriptを使用します。
ただし、スマホでは有効にしたいので、PC・タブレットのみ無効にします。デバイスの切り替えにはユーザーエージェントで判定して切り替えを行います。
else以降がPC用のJavascriptになります。

jQueryを使用する場合は、下記のようになります。

$(function(){
  if(navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)){
　　　　// スマートフォン
  }else{
　　　　//　PC
    $('a[href^="tel"]').click(function(){
      return false;
    });
  }
});

JavaScriptのみで対応する場合は、下記のようになります。

if(navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)){
　　// スマートフォン
}else{
　　//　PC
  const telLink = document.querySelectorAll('a[href^="tel"]');
  for(let i = 0, count = telLink.length; count > i; i++){
    telLink[i].addEventListener('click', function(e){
      e.preventDefault();
    });
  }
}