HTML5モバイル端末 - ビューポートの詳細説明

モバイル ページでビューポートの問題は誰でも経験したことがあります。ビューポートに関する記事はたくさんありますが、非常に詳しく説明されているこの 2 つの記事を皆さんにお勧めします。

この記事ではビューポートにいくつかの追加を加えています

携帯電話の画面

携帯電話の画面はハードウェア属性であり、JS またはメタ タグを通じて影響を与えることはできません。

• 携帯電話画面の物理ピクセルは、携帯電話メーカーがピクセル、解像度、PPI と呼んでいるものです。

Androidの場合は720X1280、1080X1920などです
iPhoneの場合はiPhone5 640X1136、iPhone6 750X1334、iPhone6P 1080X1920です

• 携帯電話の画面の論理ピクセル、ピクセル数その後物理ピクセルが変換されます。それが理想的なビューポートのサイズです

iPhone5の画面は元々640pxの幅ですが、320pxに変換されます
iPhone6の物理ピクセルは750pxで、375pxに変換されます
iPhone6Pは少し奇妙ですが、物理ピクセルは実際には幅 1080 ピクセルですが、システムの外部露出は確かに 1242 ピクセルであり、414px

screen.width/height に変換されると、論理ピクセルを取得できます。画面のscreen.width/height 可以获取屏幕的逻辑像素

布局视口 layout viewport

刚才讲过的屏幕物理像素和逻辑像素，这些都是手机厂商设置好的，我们是无法设置的，重点再与接下来的两个视口，大家千万别混淆了。

layout viewport 相当于浏览器的宽度。
我们是可以通过 设置的。
默认情况下，layout viewport 一般为 980px 宽。

document.documentElement.clientWidth 可以获取 layout viewport 的宽度。

视觉视口 visual viewport

视觉视口可以看作是手机屏幕这么大的一个窗口，但是它能显示的像素个数却不是屏幕上面的这么多逻辑像素。

视觉视口不太容易理解，虽然手机屏幕的逻辑像素已经固定了，比如 iPhone5 是 320px。

但是屏幕这 320px 宽，却可以显示 980px 宽的内容，所以视觉窗口的宽度是 980px。
很多没有对移动端做适配的网页，我们用手机打开，发现网页被缩小到手机屏幕这么宽了。

重点就在于缩放，缩放让320px的屏幕能显示更多内容了。
window.innerWidth 可以获取 visual viewport 的宽度。

通过 可以设置 visual viewport 的宽度。
visual viewport 的宽度为 screen.width / initial-scale
レイアウト ビューポート レイアウト ビューポート

先ほど述べたように、画面の物理ピクセルと論理ピクセルは、携帯電話メーカーによって設定されます。次の 2 つのビューポートに焦点を当てます。混同しないでください。彼ら。

レイアウト ビューポートはブラウザの幅と同じです。

を通じて設定できます。

デフォルトでは、レイアウトビューポートの幅は通常980ピクセルです。

document.documentElement.clientWidth は、レイアウト ビューポートの幅を取得できます。

ビジュアル ビューポート

ビジュアル ビューポートは、携帯電話の画面と同じくらい大きなウィンドウとみなすことができますが、表示できるピクセル数は画面上の論理ピクセル数ほど多くはありません。

携帯電話画面の論理ピクセルは固定されていますが、視覚的なビューポートは理解しにくいです。たとえば、iPhone5 は 320 ピクセルです。

ただし、画面の幅は 320 ピクセルですが、幅 980 ピクセルのコンテンツを表示できるため、ビジュアル ウィンドウの幅は 980 ピクセルになります。

多くの Web ページはモバイルデバイスに対応していません。携帯電話で Web ページを開くと、Web ページが携帯電話の画面の幅に合わせて縮小されてしまいます。

重要なポイントはズームです。ズームすると、320 ピクセルの画面により多くのコンテンツを表示できます。

window.innerWidth はビジュアル ビューポートの幅を取得できます。

を通じてビジュアル ビューポートの幅を設定できます。

ビジュアル ビューポートの幅は screen.width /Initial-scale です。

同時に、レイアウト ビューポートの幅も常に より大きいため、レイアウト ビューポートの幅にも影響します。またはビジュアルレイアウトの幅と同じです。

如果不设置 initial-scale ，iOS设备会自动将 visual viewport 缩放到 布局视口一样大。

デフォルトのレイアウト ビューポートの幅を覚えていますか?

画面の論理ピクセル、レイアウト ビューポート、およびビジュアル ビューポートの関係

<meta name="viewport" content="width=device-width">

レイアウト ビューポートの幅を画面の幅に設定します🎜🎜

<meta name="viewport" content="width=640">

🎜レイアウト ビューポートの幅を 640px (物理ピクセルではなく論理ピクセル) に設定します🎜 🎜

<meta name="viewport" content="initial-scale=0.5">

🎜ビジュアル ビューポートを画面の幅の 2 倍に設定します (正しい理解は、ビジュアル ビューポートの幅の 0.5 倍が画面の幅であるため、ビジュアル ビューポートの幅は画面の幅の 2 倍です) 🎜 🎜🎜このときのレイアウトビューポートの幅は、デフォルトの 980px ではなく、画面幅の 2 倍です 🎜🎜 概要: 🎜

1、默认情况下 layout viewport 为 980px
2、width=x 设置布局视口，initial-scale=y 设置视觉视口
3、如果只设置 布局视口 和 视觉视口 中的一个，那么另一个也是同样的宽度
4、布局视口 的宽度始终大于等于 视觉视口

🎜 iPhone 5 を例に挙げます 🎜

<meta name="viewport" content="width=600,initial-scale=0.5">

🎜 それでは、視覚的なビューポートの幅はどれくらいですか。とレイアウトビューポートはそれぞれ？ 🎜🎜🎜ついに、おなじみの🎜

<meta name="viewport" content="width=device-width,initial-scale=1.0">

🎜これが何を意味するか皆さんは知っています。 🎜レイアウト ビューポート ブラウザ ウィンドウ。画面の幅に設定されます。 🎜ビジュアル ビューポートも、スケーリングなしで画面の幅に設定され、画面と同じ幅で表示されるピクセル数も設定されます。 🎜これはいわゆる完璧なビューポートです。 🎜

以上がHTML5モバイル端末 - ビューポートの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。