ブートストラップはモバイルデバイスでも使用できますか?

# Bootstrap について詳しく知りたい場合は、次をクリックしてください:

#Bootstrap チュートリアル Bootstrap は現在人気のレスポンシブ開発フレームワークであり、モバイル開発にも当然使用できます。ただし、モバイルデバイスを優先したい場合は、いくつかの設定も必要です。

# ブートストラップ環境には少なくとも 3 つのファイルが必要です:

●bootstrap.min.css

●jquery.mis.js

●bootstrap.min.js

<!-- 新 Bootstrap 核心 CSS 文件 -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  
<!-- 可选的Bootstrap主题文件（一般不用引入） -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
  
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
  
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

次の点に注意してください。

Bootstrap.min.css

jquery.mis.js

bootstrap.min.js

これら 3 つのファイルの紹介順序を乱してはなりません

. 通常、2 つのファイル

jquery.mis.js

と bootstrap.min.js

が一番下に配置されます。 HTML ページ。これは、Web ページが読み込まれる前にこれら 2 つのファイルが最初に読み込まれる場合に発生する可能性のある不要な問題を防ぐためです。

適切な描画とタッチ スクリーンのスケーリングを確保するには、次のことを行う必要があります。それを 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">

補足:

meta:

width: 視覚領域の幅。値は数値またはキーワード device-width

高さ: 幅

と同じ 初期スケール: ページが初めて表示されるときの、表示領域のズーム レベルです。値が 1.0 の場合、ページは

Maximum-scale=1.0, minimum-scale=1.0; 表示領域のズーム レベル

Maximum-scale は、次のことを可能にするプログラムです。 1.0 では、ユーザーが実際のサイズを超えてページを拡大することは禁止されます。

ユーザースケーラブル: ページをスケーリングできるかどうか、スケーリングは禁止されません

以上がブートストラップはモバイルデバイスでも使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。