HTML5 モバイル アプリケーション開発 - ビューポートの役割の詳細な紹介 (画像とテキスト)

HTML5 を使用してモバイル アプリケーションやモバイル Web ページを開発する場合、 セクションには必ず次のコードが含まれます。インターネットでは、たくさんの答えが得られます。インターネットからいくつかの紹介を収集し、将来の参考のために整理しました。

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

ビューポートとは

モバイルブラウザは、仮想「ウィンドウ」(ビューポート)にページを配置します。通常、この仮想「ウィンドウ」(ビューポート)は画面よりも広いため、各Webページを配置する必要はありません。非常に小さなウィンドウに押し込まれると (モバイル ブラウザーに最適化されていない Web ページのレイアウトが崩れてしまいます)、ユーザーはパンやズームを行って Web ページのさまざまな部分を表示できます。 Safari ブラウザのモバイル バージョンでは、最近ビューポート メタ タグが導入されました。これにより、Web 開発者はビューポートのサイズとズームを制御できるようになります。他のモバイル ブラウザも基本的にこれをサポートしています。

width: ビューポートのサイズを制御します。600の場合は値、またはデバイスの幅であるdevice-widthなどの特別な値を指定できます(単位はスケーリングが100%の場合のCSSピクセルです) ）。
height: 幅に対応し、高さを指定します。
initial-scale: 初期スケーリング比。これは、ページが初めてロードされたときのスケーリング比です。
maximum-scale: ユーザーがズームできる最大スケール。
minimum-scale: ユーザーがズームできる最小スケール。
ユーザースケーラブル: ユーザーが手動でズームできるかどうか

「ビューポート」、中国語に翻訳すると、「ビューポート」と呼ぶことができます モバイルデバイスの画面は一般的にモバイルデバイスの画面よりもはるかに小さいことは誰もが知っています。 PC および Webkit ブラウザは、より大きな「仮想」ウィンドウをモバイル デバイスの画面にマッピングします。デフォルトの仮想ウィンドウは幅 980 ピクセル (ほとんどの Web サイトの現在の標準幅) であり、その後、特定の比率 (3:1) に従ってマッピングされます。または 2:1) ズームします。つまり、通常の Web ページをロードするとき、Webkit はまずブラウザ標準の 980 ピクセルで Web ページをロードし、次にそれを幅 490 ピクセルに縮小します。この削減はグローバル削減であることに注意してください。つまり、ページ上のすべての要素が削減されます。以下の図に示すように、モバイルデバイス上の通常の記事ページの効果:

ページは歪みなしで 980 ピクセルで読み込まれますが、拡大縮小後は、多くのものが基本的に肉眼では見えなくなります。

では、WebKit のビューポートを人為的に変更することはできるでしょうか?もちろん、次のビューポート コードを と の間に追加することもできます:

<meta name="viewport" content="width=500"/>

force viewport size コマンド をページに追加した効果を見てみましょう。 下の図に示すように:

それでは、もっと良い方法はあるでしょうか?たとえば、モバイル デバイスの画面サイズを自動的に検出し、それに応じてコンテンツを調整します。以下のコードを見てください。device-width はモバイル デバイスの画面幅を自動的に検出します:

<span   style="max-width:90%"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width"</span> <span style="color: #0000ff;">/><br/></span>

以上がHTML5 モバイル アプリケーション開発 - ビューポートの役割の詳細な紹介 (画像とテキスト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。