ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップを適応させる方法

ブートストラップを適応させる方法

藏色散人
藏色散人オリジナル
2019-07-16 10:56:392437ブラウズ

ブートストラップを適応させる方法

#ブートストラップを適応させる方法

ブートストラップ画面の適応

Bootstrap によって開発された Web サイトをモバイル対応にし、適切な描画とタッチ スクリーンのスケーリングを確保するには、以下に示すように、Web ページの先頭にビューポート メタ タグを追加する必要があります。

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

width 属性デバイスの幅を制御します。 Web サイトがさまざまな画面解像度のデバイスで表示されることを想定して、Web サイトをデバイス幅に設定すると、さまざまなデバイスで正しくレンダリングされます。

initial-scale=1.0 を指定すると、Web ページが読み込まれるときに、スケーリングなしで 1:1 の比率でレンダリングされます。

モバイル ブラウザでは、ビューポート メタ タグに user-scalable=no を追加することでズームを無効にできます。

通常、maximum-scale=1.0 は user-scalable=no とともに使用されます。ズームを無効にすると、ユーザーはスクロールのみできるようになり、Web サイトがネイティブ アプリのように見えます。

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

関連する推奨事項:「

ブートストラップ チュートリアル

以上がブートストラップを適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。