ホームページ スマホサイズ

質問

ホームページを作成したのですが、スマホで表示したときに拡大されて表示されてしまします。

レイアウトを変えずにそのまま縮小し、画面サイズに合わせた状態で表示させたいのですが、どうすればいいでしょうか？

（wordpressで作っています。）

教えてください。

回答No.1

ORUKA1951

ものさしで計られると分かると思いますが、実際には縮小されて表示されていると思います。
Viewportで、なにも指定していなければ、スマホの解像度は高いので小さくなっているはずです。
　本来は1pxは約0.26mmですから200pxと指定してあれば、パソコンでは52cm幅ですが、スマホでは26cm程度になっているはずですが？？？
　そのために、幅広固定で小さい文字で作っているとスマホでは読めない。

　スマホもパソコン用も同じデザインでしたら、当然リキッドでデザインされていると思いますから、通常は半分の実サイズで機種のデフォルトのサイズ、980px(PC用490px)とかでしたらそのサイズまでは文字は小さくなりますが表示されるはずです。
　それを避けたければ
<meta name="viewport" content="width=device-width; initial-scale=1.0">
とviewportで縮小しない用に設定しておきます。

★mediaqueryにしろviewportにしろ、あくまでページがリキッドで製作されていることが大前提です。
header,section,footer{width:100%;min-width:630px;margin:0 auto;max-width:980px;}
header h1{width:100%;background-image:url();background-size:cover;}
と言う風に・・