webdevqa.jp.net

レスポンシブWebサイトがモバイルで全幅にズームアウト

Bootstrap responseness navbarをテストしており、 デモ Webサイトがあります。デスクトップ上のブラウザのサイズを変更すると、ナビゲーションバーを含むすべてが正常に動作します。ナビゲーションバーは折りたたみ可能なメニューになり、上部に小さなアイコンがあり、クリックしてメニューボタンを表示できます。

しかし、モバイルブラウザー(chromeとAndroidのインターネットブラウザーで試してみました)から試してみたところ、レスポンシブデザインが表示されませんでした。ウェブサイトのようなデスクトップの非常に小さなバージョンしか見ることができませんでした。

誰かが私が間違っていることを指摘できますか?

134
lawphotog

これをHTMLヘッドに追加します。

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

これにより、より小さなデバイスブラウザーにページのスケーリング方法が指示されます。詳細については、こちらをご覧ください。 https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

370
Zim

ここで提案されているとおり http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

オートスケーリングの可能性があるため、with/heightが自然に採用されるため、ポートレートからランドスケープに移動し、より快適なユーザーエクスペリエンスを取り戻すため、さらに良い選択になります。

17
Tom

受け入れられた答えが機能していないこのエラーを検索している人々のためにこれを追加します。これはまれではあるが、それでもイライラするケースだと思う:

ページがフレームセット内にレンダリングされている場合(ドメインクローキングなど)、メタタグを配置しても役に立ちません。クローキングドメインのページにそれらを配置する必要があり、DNSホストに応じてアクセスできる場合とできない場合があります。

0