シンプルなブートストラップページがiPhoneで応答しない

84

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-bootstrap responsive-design

— RaySF
ソース

テストページやコードを投稿できますか？

— Andres Ilich 2012

それは私にとって敏感です。なぜ反応しないと思いますか？

— Jesse Wolgamott 2012

@RaySF@import使用しているルールにはいくつかの問題がありますが、それは個人的なものですが、なぜ機能しないのか原因がわかりません。テストケースを投稿できますか？

— Andres Ilich 2012

@JesseWolgamott iphoneで応答しません。上記の2つのページを開くと、公式の例は正常に機能します（つまり、メニューが同じように表示されません）が、私のページはデスクトップと同じように表示されます。

— raySF 2012

1

@RaySF仕事の性質上、@import表記法を使用して積み重ねられた非常に大きなスタイルシートの互換性を高め、パフォーマンスを向上させる方法を研究する必要がありました。その過程で、その手法が原因で多くの問題が発生し、後でhtml<link>タグを使用してスタイルシートを追加することで修正されたbiiigパフォーマンスヒット（および説明できないエラーも多数）があることがわかりました。後でここSOでこのような質問によってサポートされた疑い。

— Andres Ilich 2012

184

必ず追加してください：

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

あなたに<head>。

同様の問題があり、ビューポートの幅の問題だと誤解しました。

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

— ビクターロペスガルシア
ソース

8

これにより、縦向きと横向きの両方のビューを機能させることができます。<meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;" />

— virtualeyes 2012年

@virtualeyes、ヒントをありがとう！ユーザーのスケーリングを許可し、lanscapeビューを正しく機能させる方法はありますか？

— アンドレイ

いいえ、私はJQuery mobileを使用していますが、レスポンシブデザインを大いに信じていません。モバイルをモバイル、タブレット以上をデスクトップにしましょう。間にあるものは何でも構いません

— ;

111

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

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

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

— ニコラス・バディア
ソース

4

これを使用するには、TwitterBootstrap公式サイトの例を更新する必要があります。

— wenbert 2012年

1

よろしくお願いします。画面の回転で同様の問題がありましたが、今では魅力のように機能します。

— マークバイタル

8

これは受け入れられた答えでなければなりません！

— Sheharyar 2013

6

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

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

— null許容
ソース

2

私はこの問題を解決するために何時間も費やし、最終的にこのコメントに出くわしました。ありがとうございました！

— Ed Shee 2016年

このコメントは、小さなグループの人々をとても幸せにするでしょう。

— ニコラスロホ2017

iframeがラップされていないのですが、適切なメタタグに問題があるので、とにかくiframeを非表示にできますか？

— helle 2018

3

私はこの問題に数時間立ち往生しました。

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

— dpigera
ソース

container-fluid私のためのトリックをやりました！

— ポーラ