■ Webデザインを学ぶ【初級/後編】,  ◎ レスポンシブデザイン

モバイルフレンドリー

meta name=”viewport”


ページがすべてのデバイスに対応していることをブラウザに知らせるには、
ドキュメントのヘッダーに次のメタタグを追加します。
[code]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[/code]

meta viewport タグは、ページのサイズやスケーリングを、デバイスの幅に合わせてどう調整するかをブラウザに伝えます。meta viewport 要素を指定しない場合は、モバイル ブラウザでもデフォルトとして、パソコン画面の幅(デバイスによって異なりますが通常はおよそ 980 ピクセル)でページがレンダリングされます。
その後モバイル ブラウザがフォントサイズを大きくし、画面に収まるようにコンテンツを縮小する、またはコンテンツの一部のみを表示する、といった調整を試みます。

https://developers.google.comより引用
レスポンシブ デザインにする理由

モバイルフレンドリー

Googleより勧告宣言
2015年4月21日以降モバイルフレンドリー(スマートフォン対応)であるかどうかが検索ランキングに反映する、という公式発表がありました。

モバイル フレンドリーテスト