検索
ホームページウェブフロントエンドjsチュートリアルビューポートと関連属性の間の関係の分析 (写真)

この記事の内容は、ビューポートと関連する属性の関係の分析 (図) に関するものです。必要な方は参考にしていただければ幸いです。

これ以上の苦労はせずに、本題に入りましょう

ビューポートについて一般的に理解している子供用靴は、ビューポートには 3 つのタイプがあることを知っているはずです

  1. レイアウト ビューポート (レイアウト ビューポート)

  2. Visual ビューポート

  3. 理想的なビューポート

に相当するものがあります5 つの関連プロパティ

  1. width: レイアウト ビューポートの幅を特定の値に設定します

  2. initial-scale: ページの初期化を設定しますレイアウト ビューポートのズーム レベルと幅。

  3. #minimum-scale: 最小ズーム レベルを設定します

  4. maximum-scale: 最大ズーム レベルを設定

  5. ユーザースケーラブル: ユーザーがズームできないようにするかどうか

ビューポートと関連属性の間の関係の分析 (写真)##理想的なウィンドウがない理由: 理想的なウィンドウがないからです。ウィンドウはブラウザです。自分で定義した理想的なウィンドウが、異なるブラウザ デバイスでは一貫性がないのは普通のことです。

ビューポートと関連属性の間の関係の分析 (写真)レイアウト ビューポート

モバイル デバイスの通常の幅は 240 ~ 640 ピクセルですが、多くのデスクトップ Web サイトでは幅がすべてです。 800ピクセル以上。 35% の sidbar はデスクトップでは正常に見えますが、携帯電話では非常に狭くなります。この問題を解決するために。多くのモバイル ブラウザ メーカーは、ビューポートの幅を画面サイズよりもはるかに広く、768 ~ 1024 の範囲で設計していますが、一般的な幅は 980 ピクセルです。

下の図は、ビューポートメタが追加されていない場合のモバイル端末に対応する幅を示しています(iPhone 8pでも980です)

ビューポートと関連属性の間の関係の分析 (写真) ブラウザーがモバイルに最適化されていない Web サイトに遭遇すると、ユーザーが Web サイト全体を見ることができるように、ブラウザーは Web サイトを可能な限り縮小します。

ビューポート メタの幅は、一般的なデバイス幅に加えて、レイアウト ビューポートの設定に使用されます。600 などの固定値に設定することもできます。

CSS レイアウトはレイアウト ビューポートに基づいて計算され、レイアウト ビューポートによって制約されます。

#以下に示すように、ピンクのバーの幅は 600 * 30% = 180

ビューポートと関連属性の間の関係の分析 (写真) に基づいています。 ##initial- Scale は、レイアウト ビューポートの設定にも使用されます。これは、最小スケールや最大スケールとは異なります。

レイアウト ビューポートの幅 = 理想的なビューポートの幅/初期スケールであるため、下の図のレイアウト ビューポートの幅は 106

となります。 ビューポートと関連属性の間の関係の分析 (写真)#ビジュアル ビューポート

ビジュアル ビューポートは、ユーザーが表示している Web サイトの領域を指します。ユーザーは、ズームすることでビジュアル ウィンドウを操作できます。

同時に、レイアウト ウィンドウは影響を受けません。

通常の状況では、ビジュアル ウィンドウは開発者にとって重要ではありませんが、重要である場合は、本当に必要な場合は、window.innerWidth/Height を使用して、現在の視覚的に適切な値を取得できます (Android Webkit2 とプロキシ ブラウザでは問題が発生します)

ビューポートと関連属性の間の関係の分析 (写真)# #理想的なビューポートレイアウト ウィンドウについて話したとき、デスクトップ Web ページの幅に適応するために、レイアウト ウィンドウのデフォルトの幅は一般的に約 980 であると述べましたが、これは Web サイト上での理想的な幅ではありません。モバイル側では、ブラウザのメーカーが理想的なビューポートの概念を導入しました。

理想的なビューポートとは、デバイスにとって最も理想的な

レイアウト ビューポート サイズ

であり、ブラウジングと読み取りに最も理想的な幅を備えています。

理想的なビューポートはブラウザによって 定義され、デバイスやオペレーティング システムの機能ではありません。したがって、同じデバイス上の異なるブラウザでは、理想的なフィット幅が異なる場合があります。

理想的なビューポートの幅は、デバイスが変わると変化します (初期の Safari は例外で、initial-scale=1 で解決できます。私は iPhone 8p で試してみましたが、理想的なビューポートはその後自動的に変わります)デバイスを回転する)

次の 2 つの方法は、レイアウト ウィンドウの幅を理想的なウィンドウの幅に設定できますが、最初の方法は初期の Safari でデバイスを回転しても変わりません。2 つ目の方法は、 IE 10 では幅が正しくないため、3 番目のタイプは完璧なマタ ビューポートです

<meta>

<meta>

<meta>

すべてのスケーリングは理想的なビューポート幅に基づいています

最大スケールと最小スケールは次の値に基づいて決定されますレイアウト ウィンドウの幅は関係ありません。

下の図では、理想的なビューポートの幅は 320 ピクセルで、レイアウト ビューポートは 160 ピクセルに設定されています。スクリーンショットは最大までズームインしたときのもので、対応するビジュアル ウィンドウの幅は 32 ピクセル (2 の幅) です。ピンク色)、これは幅の /10 倍の理想的なビューポート幅です。

以上がビューポートと関連属性の間の関係の分析 (写真)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はsegmentfault思否で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是什么意思html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

html5为什么只需要写doctypehtml5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

因为html5不基于SGML(标准通用置标语言),不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明,用于告诉浏览器编写页面所用的标记的版本。

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン