web-dev-qa-db-ja.com

レスポンシブWebデザインはデスクトップで動作しますが、モバイルデバイスでは動作しません

私は携帯電話に反応するウェブサイトを持っています。デスクトップを使用して作成しました。ブラウザウィンドウを調整すると、携帯電話では完全に機能しますが、実際の携帯電話で確認すると、Samsung Galaxy S2はモバイルビューに反応しません。

何が間違っているのでしょうか？

mobilewebresponsive-design
110
Tadas Davidsonas

おそらく、htmlヘッドにビューポートメタタグがありません。

 <meta name="viewport" content="width=device-width, initial-scale=1">

これがないと、デバイスはビューポートを想定し、フルサイズに設定します。

詳細 こちら 。

279
Agush

私もこの問題に直面しています。最終的に私は解決策を得た。以下のコードを使用してください。希望：問題は解決します。

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

5
Saiful Islam

上記で回答されており、使用するのは正しいが

<meta name="viewport" content="width=device-width, initial-scale=1">

ただし、Reactとwebpackを使用している場合は、要素タグを閉じることを忘れないでください

<meta name="viewport" content="width=device-width, initial-scale=1" />
0
Shadab Ahmed

CSSを確認するか、CSS Validatorを使用します。

    Parse Error

   .navbar .nav li a {
    padding-right: 5px;
    paddng-left: 5px;

中かっこやタイプミスを閉じていないようです。

0
Marcelo Austria