web-dev-qa-db-ja.com

シンプルBootstrap=ページはiPhoneで応答しません

Twitter Bootstrap=の例をダウンロードして、簡単なRailsプロジェクトを作成します。必要に応じてcssをコピーし、正常に表示します。jsとすべてをコピーしました。私のデスクトップではうまく機能します：ブラウザのサイズを変更するとページが再編成されます。サイズの異なる「レスポンシブデザインテストツール」を使用すると、うまく機能します。

私が抱えている問題は私のiPhoneにあります：それは私のデスクトップのようにジャストを表示します。

Bootstrap Hero Exampleページ（これは私が最初に作成したページです）を試してみると、iPhoneでうまく機能します。

何がおかしいのでしょうか？ CSSにはほとんど触れていません。フッターにパディングを追加しました。

参考までに、変更したCSSは、アプリをapplication.css次のコンテンツ：

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}
twitter-bootstrapresponsive-design
81
RaySF

必ず追加してください：

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

あなたの<head>。

私は同様の問題を抱えていましたが、それは単にビューポートの幅の問題だと思いました。

更新：より完全なバージョンについては、@ NicolasBADIAの回答をご覧ください。

175
Víctor López García

Frntkによって提案されたコードは、デバイスを横向き表示にすると機能しません。また、virtualeyesによって提供されるソリューションは、コンマの代わりにセミコロンを使用するため、正しくありません。正しいコードは次のとおりです。

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

ソース： https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

107
Nicolas BADIA

確かに、非常に小さなEdgeケースですが、言及する価値があります。

DNSプロバイダーを介してドメイン転送を使用している場合、サイトはiframeにラップされる可能性があります。たとえば、GoDaddyは、ドメインをマスクして転送する場合にこの手法を使用します。

6
nullable

私は数時間この問題に悩まされていました。

<div class="container-fluid">...</div>内にもコンテンツを配置することを忘れないでください

2
unicornherder