ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップを携帯電話の画面サイズに適応させる方法

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

angryTom
angryTomオリジナル
2019-07-19 11:16:365611ブラウズ

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

推奨チュートリアル: Bootstrap チュートリアル

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

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

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

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

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

通常、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">

元の記事のアドレス: https://www.cnblogs.com/wang3680/p/1fba762fb916d0189047085d9e14c117.html

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

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