レスポンシブ対応

Question

wordpressにbootstrapを使ってwebサイトを構築しているものです。
レスポンシブ対応について質問です。
スマホで表示してみると全体が小さくなってしまいます。調べてみるとビューポートが問題と出てくるのですが、ビューポートは正しく
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
となっています。

それ以外で何か問題は考えられるのでしょうか？

Answer 1

<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no">

とするとどうなりますでしょうか。
見えない巨大なDOMが隠れている可能性もあります。

Chromeのモバイルビューでインスペクタを利用すると問題の切り分けがしやすいかと思います。

Comments

[msuhyoshinori]

上手く対応できました！ありがとうございます。
さらに質問を重ねて恐縮ですが、さらに文字サイズがスマホ版だと大きくて１行で書いていたのが２行になったりするんですが、どうしたらいいのでしょうか？
ご回答くださるとうれしいです！

[terushu]

画面サイズに比例して文字サイズを変更する場合は
```css
.hoge {
font-size: 3vw;
}
```
のような書式を利用する事ができます。
3vwで横幅の3%になります。3vhを指定すれば縦幅が基準となります。

この情報はお役に立ちますでしょうか。

[msuhyoshinori]

なるほど。やはりcssの一つ一つを変えていく必要がありますよね！
ご丁寧に対応いただいてありがとうございます！