bootstrap3 が最初にサポートするデバイスはどれですか?

bootstrap3 は、「モバイル」デバイスのサポートを優先します。 Bootstrap3 はモバイル ファーストのデザイン コンセプトで、デザインされたスタイルはすべてデフォルトでモバイル デバイスに適用され、メディア クエリを使用して他のサイズのデバイス用のデザインを段階的に追加します。

このチュートリアルの動作環境: Windows7 システム、bootstrap3.3.7 バージョン、DELL G3 コンピューター

Bootstrap 3 はモバイル ファースト フロントです。 -end フレームワーク 。モバイルファーストとは、デザインされたすべてのスタイルがデフォルトでモバイルデバイスに適用され、その後、デザイン内でメディアクエリを使用して他のサイズのデバイス用のデザインを段階的に追加することを意味します。

以前の Bootstrap バージョン (2.x まで) では、プロジェクト全体をモバイル対応にするために別の CSS を手動で参照する必要がありました。

今は違います。Bootstrap 3 のデフォルト CSS 自体はモバイル対応です。

Bootstrap 3 は、モバイルを第一に、デスクトップを第二に設計されています。モバイルデバイスを使用するユーザーがますます増えているため、これは実際には非常にタイムリーな変化です。

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 を viewport meta タグに追加することでズームを無効にできます。

通常、

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

この方法はすべての Web サイトに推奨されるわけではないことに注意してください。それでも、実際の状況によって異なります。

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

推奨される調査: 「

ブートストラップの使用方法のチュートリアル」

以上がbootstrap3 が最初にサポートするデバイスはどれですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。