ホームページ > 記事 > ウェブフロントエンド > ブートストラップを携帯電話の画面に適応させる方法
ブートストラップを携帯電話の画面に適応させる方法
- 尚オリジナル
- 2019-07-18 17:19:083331ブラウズ
Bootstrap フレームワークを使用する場合、小さいサイズのローカル デバッグでは問題ありません。すべてが正常です。携帯電話に切り替えて開きます。表示にはまだ効果があります。大画面。
解決策は実際には非常に簡単です。
公式 Web サイトの説明:
HTML5 ドキュメント タイプ
Bootstrap で使用される一部の HTML 要素と CSS プロパティでは、ページを HTML5 ドキュメント タイプに設定する必要があります。プロジェクト内のすべてのページは、次に従ってフォーマットする必要があります。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
モバイル ファースト
Bootstrap 2 では、フレームワークの特定の重要な部分にモバイル フレンドリーなスタイルを追加しました。そして、Bootstrap 3 では、フレームワーク全体を最初からモバイルフレンドリーになるように書き直しました。今回は、単にモバイル デバイス用のオプションのスタイルを追加するだけではなく、それらをフレームワークのコアに直接統合します。とはいえ、Bootstrap はモバイルファーストです。モバイル固有のスタイルは、追加のファイルを追加するのではなく、フレームの隅々に統合されています。
適切な描画とタッチ スケーリングを確保するには、ビューポート メタデータ タグを 93f0f5c25f18dab9d176bd4f6de5d30e に追加する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1">
モバイル デバイスのブラウザでは、ビューポートのメタ属性を user-scalable=no に設定することでズーム機能を無効にできます。ズーム機能を無効にすると、ユーザーは画面のスクロールのみが可能になり、Web サイトがよりネイティブ アプリケーションのように見えます。この方法はすべての Web サイトに推奨されるわけではないことに注意してください。実際の状況によって異なります。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。
以上がブートストラップを携帯電話の画面に適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。