[解決済み] 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 の回答を参照してください。
関連
-
[解決済み] Bootstrap:Bootstrapのバージョンを識別する方法は?
-
[解決済み] BootstrapでNavbarが折りたたまれない
-
[解決済み] B-tableのBootstrapVue条件列
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrapのcol-lg-*、col-md-*、col-sm-*の違いは何ですか?
-
[解決済み] レスポンシブイメージアラインセンターbootstrap3
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み] Bootstrap 3.0 - 固定カラムサイズを含む流動的なグリッド
-
[解決済み] bootstrap 4 responsive utilities visible / hidden xs sm lg not working.
-
[解決済み] ブートストラップカルーセルのアイテムがスライドする速度をコントロールするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み] twitterのbootstrapで五等分の列を作る
-
[解決済み] Bootstrap v4におけるvisible-**とhidden-**の欠落について
-
[解決済み】リストセレクトボックス(ドロップダウン)をbootstrapでレンダリングする方法は?
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] CSSの@importとlinkの違いについて
-
[解決済み] Bootstrap 4 datapicker.jsが含まれていません [閉鎖].
-
[解決済み] Twitter Bootstrapの<hr>タグが正しく機能しない?
-
[解決済み] Bootstrapを使ってモバイルでテーブルを表示するには?