目次
ビューポートとは
ビューポートの基本
ビューポートに関するいくつかの質問
ホームページ ウェブフロントエンド htmlチュートリアル HTMLメタビューポートの詳しい説明attribute_html/css_WEB-ITnose

HTMLメタビューポートの詳しい説明attribute_html/css_WEB-ITnose

Jun 24, 2016 am 11:36 AM

ビューポートとは

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

ビューポートの基本

モバイル Web ページ用に最適化されたページで一般的に使用されるビューポート メタ タグは、おおよそ次のとおりです:

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

initial-scaleページの設定 初期スケーリング値は、小数を含むことができる数値です minimum-scalemaximum- ユーザーが許可する最小スケーリング値。スケールheightの高さを設定します。このプロパティは私たちにとって重要ではありません、ほとんど使用されませんユーザースケーラブル ユーザーがズームを許可されているかどうか、値 「いいえ」または「はい」です。いいえは許可されないことを意味し、はいは許可されることを意味します
width レイアウトビューポートの幅を正の整数、または文字列「width-device」として設定します
ユーザーが許可する最大スケーリング値は数値であり、小数を使用できます
レイアウトビューポート

ビューポートに関するいくつかの質問

ビューポートはiosに固有の属性であるだけでなく、androidやwinphoneにもビューポートがあります。彼らが解決したい問題は同じです。それは、デバイスの実際の解像度を無視し、dpi を通じて物理サイズとブラウザの間で解像度を直接リセットすることです。この解像度はデバイスの解像度とは何の関係もありません。たとえば、3.5 インチ -320*480 iPhone 3 gs、3.5 インチ -640*960 iPhone 4、または 9.7 インチ -1024*768 iPad 2 の場合、デバイスの解像度と物理サイズは異なります。異なる場合は、ブラウザでビューポートを同じ解像度に設定できます。たとえば、Web サイトの幅が 800 ピクセルの場合、ビューポートの幅 = 800 を設定すると、これら 3 つの異なるデバイスで Web サイトを正確に全画面表示できます。

ビューポートについて少し知識がある学生は、上記の知識をすでに知っているはずだと思います。今日私が言いたいことの焦点はこれではありません。ここで説明したいのは、iOS と Android でのビューポートのパフォーマンスのいくつかの違いです。

ビューポートに関する知識をインターネットで検索すると、基本的には次のような情報がすべて出てきます:

このコードの意味は、ビューポートの幅を物理デバイス上の実際の解像度と等しくし、ユーザーがズームできないようにすることです。すべての主流の Web アプリはこのように設定されており、その機能は意図的にビューポートを放棄し、ページを拡大縮小しないことです。このようにして、Web ページはデバイス上の実際の解像度と同じでなければなりません。より高く見えます。 PS をプレイしている学生なら、1000 * 1000 の画像を 500 * 500 ポイントに直接拡大縮小するとどうなるか知っているはずですよね?映像の歪みは避けられません。

注: iPhone と iPad では、ビューポートをどれだけ広く設定しても、デフォルトのスケーリング値が指定されていない場合、現在のページが水平方向にスクロールしないようにスケーリング値が自動的に計算されます。バー(またはビューポートの幅が画面の幅)。

しかし、私が作りたいアプリケーションは、ビューポートとズームを使用する必要があります。実際の解像度がどのようなものであっても、物理的なサイズがどのようなものであっても、ブラウザーでは均一の解像度を持ち、ユーザーがズームできないようにしたいと考えています。テストに使用したデバイスは、iPhone 4、iPad 2、htc の g11、メーカー不明の aquos Phone (Android システム)、ASUS の Android Pad、および Dell の winphone です。そして、途中で次の問題に遭遇しました。 1) ビューポートが明示的に設定されていない場合、幅はデフォルトで 980 に設定されます。ページ上のすべての要素の幅が 980 未満の場合、幅は 980 になります。ページの最も幅の広い位置が 980 を超える場合、幅は最大幅と等しくなります。つまり、デフォルトではページ全体を左から右に表示できます。ビューポートが設定されている場合、たとえば、user-scalable=no が のように設定されている場合、幅は引き続き 980 と表示されます。 ios (つまり、デフォルトでは dpi によってスケーリングされます) ですが、Android および Winphone ではスケーリングされなくなり、ブラウザーの解像度は実際の設定解像度と一致します。

2) iOS デバイスの場合、幅の設定は有効になりますが、Android の場合、幅の設定は有効になりません。 iOS デバイスの場合、スケーリング率、つまり dpi は、設定した幅と実際の解像度に基づいて自動的に計算されます。Android では、設定できる幅は特別なフィールド target-densitydpi です。つまり、ブラウザの幅、デバイスの実際の幅、dpi という 3 つの変数があります。 それらの間の関係を簡単に式で表してみます (実際の関係ではありません。簡単に説明するためです)。 ここでの 3 つの変数のうち、デバイスの実際の幅は操作できない既知の値です。 . 、他の 2 つの変数の 1 つを設定して、他の変数に影響を与えることができます。iOS では、変更できるのはブラウザの幅であり、Android では、変更できるのは dpi とブラウザの幅です。が自動的に生成されます。 Android の場合、幅をどのように設定しても、ブラウザの幅には影響しません。

target-densitydpi: target-densitydpi は、ターゲット デバイスの密度レベルを表すプライベート プロパティであり、その機能は、CSS の 1px が表す物理ピクセル数を決定することです。

target-densitydpi

値は数値、または文字列 high-dpi、medium-dpi、low-dpi、device-dpi の 1 つです

特別な注意は、target-densitydpi=device-dpi の場合、CSS の 1 ピクセルが物理ピクセルの 1 ピクセルに等しいことです。

この属性は Android でのみサポートされており、Android は target-densitydpi 属性を放棄することを決定しているため、この属性の使用は避けるべきです。

さらに詳細な情報と参照アドレス:

著者: 嵐の後に虹を見てください

出典: http://www.cnblogs.com/moqiutao/

そう感じたらこの記事はあなたにとって役に立ちます。この研究は役に立ちます。サポートと励ましをお願いします。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles