BinaryDevelop
  1. ホーム
  2. twitter-bootstrap

[解決済み] BootstrapのシンプルなページがiPhoneでレスポンシブでない

2023-05-18 04:53:18

質問

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;
}

どのように解決するのですか？

必ず追加してください。 

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

をあなたの <head> .

私も同じような問題があり、ビューポート幅の問題だと勘違いしていました。

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します