meta name="viewport"の役割

レスポンシブデザインを実現するといわれている

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

の役割がようやくわかってきました。

スマホでニュースサイトとかを読んでいると横幅にぴったりになるように適切な文字サイズになって拡大縮小ができないというサイトがありますが、そのように「拡大縮小できない」ようにするのがuser-scalable=noのようです。

initial-scaleは、デフォルトの拡大率を指定します。

これらの設定はスマホで閲覧するときには効果がありますが、PCでChromeで見ているとviewportの指定が無視される場合があるのかもしれません。

スマホ用のページでfont-size:x-largeとかを使うとすぐに画面の幅からあふれてしまいますが、スマホ用に合わせて標準サイズだけで360pxくらいの幅を前提に作ると、PCでは小さすぎて見にくくなります。

スマホとPCの両方で良い感じに見えるサイトを作るには、

① <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />を記述。

② CSSで@mediaを使って、画面が小さい場合と大きい場合で、文字のサイズを変える

@media screen and (max-width: 679px) { /* 画面が小さい */

@media screen and (min-width: 680px) { /* 画面が大きい */

③ スマホ用のページでは、@media screen and (max-width: 679px) { の後に

body{
min-width: 360px;
margin: 0;
padding: 0;
}

として、画面の幅は360pxを前提として作るのがよいかと思います。