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

StackOverflow https://stackoverflow.com/questions/9386429

質問

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

私が抱えている問題はiPhoneにあります。デスクトップと同じように表示されます。

Bootstrap Hero Exampleページ（私が始めたページ）を試してみると、iPhoneでうまく機能します。

何がうまくいかない可能性がありますか？CSSにはほとんど触れていません。フッターにパディングを追加しただけです。

参考までに、変更したCSSは、アプリを次のコンテンツを含むapplication.cssにリンクしていることです。 ジェネラコディセタグプレ

役に立ちましたか？

解決

必ず追加してください： ジェネラコディセタグプレ

あなたの<head>に。

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

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

他のヒント

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

出典： https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

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

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top