ブートストラップを携帯電話の画面に適応させる方法-ブートストラップのチュートリアル-php.cn

ブートストラップを携帯電話の画面に適応させる方法

尚

リリース： 2019-07-18 17:19:08

オリジナル

3364 人が閲覧しました

ブートストラップを携帯電話の画面に適応させる方法

Bootstrap フレームワークを使用する場合、小さいサイズのローカルデバッグでは問題ありません。すべてが正常です。携帯電話に切り替えて開きます。表示にはまだ効果があります。大画面。

解決策は実際には非常に簡単です。

公式 Web サイトの説明:

HTML5 ドキュメントタイプ

Bootstrap で使用される一部の HTML 要素と CSS プロパティでは、ページを HTML5 ドキュメントタイプに設定する必要があります。プロジェクト内のすべてのページは、次に従ってフォーマットする必要があります。

<!DOCTYPE html>
<html lang="zh-CN">
...
</html>

ログイン後にコピー

モバイルファースト

Bootstrap 2 では、フレームワークの特定の重要な部分にモバイルフレンドリーなスタイルを追加しました。そして、Bootstrap 3 では、フレームワーク全体を最初からモバイルフレンドリーになるように書き直しました。今回は、単にモバイルデバイス用のオプションのスタイルを追加するだけではなく、それらをフレームワークのコアに直接統合します。とはいえ、Bootstrap はモバイルファーストです。モバイル固有のスタイルは、追加のファイルを追加するのではなく、フレームの隅々に統合されています。

適切な描画とタッチスケーリングを確保するには、ビューポートメタデータタグをに追加する必要があります。

<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 サイトの他の関連記事を参照してください。