レスポンシブウェブデザインはデスクトップでは機能しますが、モバイルデバイスでは機能しません

117

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

何が悪いのでしょうか？

mobile web responsive-design

— タダス・ダビドソナス
ソース

1

誰もが役立つように、情報とコードを追加する必要があります。あなたが、もしあれば、などを使用しているどのような（例えばTwitterのブートストラップなど）フレームワークなどあなたのCSS、HTML、

— ajacian81

306

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

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

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

詳細はこちら。

— アグシュ
ソース

2

この行がなくてもブラウザで機能しますが、モバイルではこの行が必要です。

— Tadas Davidsonas

3

私はあなたを愛しています

— Dimitris Filippou

私もあなたを愛しています@ΔημήτρηςΦιλίππου–

— Agush

あなたへの別の愛の言葉

— btlm 2017

3

プロダクションにindex.html実際にタグと開発が含まれていることを確認してくださいindex.html

— halafi

6

私もこの問題に直面しました。最後に私は解決策を得ました。この怒鳴るコードを使用します。希望：問題は解決されるでしょう。

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

— サイフルイスラム
ソース

2

上で答えて使うのは正しいけど

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

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

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

— シャダブ・アーメド
ソース

-1

レスポンシブメタタグ

すべてのデバイスで適切なレンダリングとタッチズームを保証するには、レスポンシブビューポートメタタグをに追加します<head>。

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

— マルセロオーストリア
ソース