ホームページ >ウェブフロントエンド >htmlチュートリアル >html5 ビューポートの概要
html5 ビューポートの概要
- 韦小宝オリジナル
- 2018-03-14 12:41:541732ブラウズ
この記事は HTML5 の ビューポート について説明しています。HTML5 のビューポートに慣れていない学生は、この記事を一緒に見ることができます。 HTML5 のビューポートを詳しく見てみましょう
要約すると、次の 3 つの質問が中心になります:
1. 仮想ウィンドウを設定する理由
まず、仮想ウィンドウの解像度を仮想ウィンドウの解像度に近づけることです。 PC では、仮想ウィンドウでページを完全に表示できるようにします。内容は、ページのコンテンツが比較的小さいため、ページをはっきりと見るには手動でズームする必要があるというだけです。
2. ビューポートの追加の用途は何ですか?
ビューポートの追加は、モバイル端末の最適化を促進することです。仮想ウィンドウの幅を device-width に設定します。これは、デバイスの物理ピクセルと同じです。これにより、メディアを通じてページのモバイル インターフェイスの表示モードを制御できるようになります。
3. デバイスの画面幅 (つまり、デバイスの物理ピクセル) と解像度の関係
実際の画面サイズは 375*667 ですが、解像度は 750*1334 です。両者は異なる概念です。
物理サイズとは、画面の実際のサイズを指します。大きな画面には、そのサイズで何ピクセル表示できるかという高解像度も必要です。表示されるピクセル数が多ければ多いほど、表現の余地が広がります。 2 台の携帯電話の画面サイズはほぼ同じですが、1 台は 2 行の漢字しか表示できませんが、もう 1 台は 5 行の漢字を表示できます。フォント サイズの違いは関係なく、重要なのは解像度です。後者の方が解像度が大きいので、同じフォントを使用しても、そのサイズ内でより多くの漢字を表示できます。カラー画面の携帯電話は確かに優れていますが、十分な解像度の画面パフォーマンスがなければ、どんなに色の品質が高くても役に立ちません。
ビューポートの役割と、それがメディアとどのように組み合わされるかを説明しましょう。
PC ブラウザで表示する場合は幅 50 ピクセルの p がちょうどよいかもしれませんが、モバイル ブラウザで表示すると大きくなりすぎます。この問題を解決するにはどうすればよいでしょうか? Apple は方法を見つけました。Safari のモバイル バージョン (iOS) でビューポート メタ タグを定義し、その機能は仮想ウィンドウ (ビューポート) を作成することであり、この仮想ウィンドウの解像度は Apple のデスクトップ モニターの解像度に近づきました。 980pxに配置されています。つまり、ブラウザでページを開くと、このページの幅は画面の物理的な幅ではなく 980 ピクセルになります。
iPhone 6 の Safari を例に挙げます。
iPhone 6 の 375 ピクセルの物理画面 - ビジュアル ビューポート、980 ピクセルの仮想ウィンドウ - レイアウト ビューポートが作成され、ビジュアル ウィンドウ (ビジュアル ビューポート) で、水平および垂直のスライド バー、または Web ページのズームインおよびズームアウトにより、最適なブラウジング効果 (デスクトップ ブラウザと同様) が実現されます。また、レイアウト ビューポートは、たとえば、コンテナ 幅が 100% の場合、このコンテナの実際の値は 375px ではなく 980px になります。このようにして、ほとんどの Web ページを通常どおり携帯電話の画面に拡大して表示できます。
画面上の仮想ウィンドウ 980px の実際のサイズはどれくらいですか?
iPhone 6 の画面の物理ピクセルは 375 ピクセル、仮想ウィンドウの幅は 980 ピクセルです。より簡単に言うと、このピクセルは 1 つのピクセルではありません。実際のウィンドウ、つまり視覚的なウィンドウのサイズ。1 つは仮想ウィンドウのサイズを記述するために使用されます。これは仮想ウィンドウとは関係ありません。 (PC ブラウザーとモバイル ブラウザーでページの幅を確認するには chromn を使用できます。)
- Safari ブラウザー、Opera ブラウザー、および chromn ブラウザーの仮想ウィンドウ サイズはデフォルトですべて 980px です。
Firefox ブラウザー携帯電話をオンにしてくださいデフォルト モードでは、仮想ウィンドウの幅がデバイスの幅になります。
スマートフォンで仮想ウィンドウを作成した後、PC の Web ページをモバイル ブラウザーで開くと、フォントと
<meta name="viewport" content="width =device-width,initial-scale=1,user-scalable=1">device-width は、仮想ウィンドウのサイズをデバイスの物理ピクセル幅と等しくなるように設定することを意味します。これにより、メディアを使用してモバイル端末に特化したページを作成することが容易になり、モバイル端末上で適切なサイズのページを表示できるようになります。
以上がhtml5 ビューポートの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。