HTML5 모바일 단말기 - 뷰포트 상세 설명

누구나 모바일 페이지에서 뷰포트 문제를 겪어보신 적이 있으실 겁니다. 뷰포트에 관한 많은 기사가 있습니다. 나는 매우 상세한 이 두 기사를 모든 사람에게 추천합니다.

이 기사에서는 뷰포트에 몇 가지 항목을 추가했습니다.

휴대폰 화면

휴대폰 화면은 하드웨어 속성이므로 JS 또는 메타 태그를 통해 영향을 줄 수 없습니다. .

• 휴대폰 화면의 물리적 픽셀은 휴대폰 제조업체에서 말하는 픽셀, 해상도, PPI 등입니다.

안드로이드에서는 720X1280, 1080X1920 등이 일반적입니다.
아이폰은 iPhone5 640X1136, iPhone6 ​​​​750X1334, iPhone6P 1080X1920

• 휴대폰 화면 논리 픽셀, 물리적 픽셀 변환 후 픽셀 수입니다. 즉, 이상적인 뷰포트

iPhone5 화면의 크기는 원래 가로가 640px인데 320px
로 변환한 것입니다. iPhone6 ​​​​물리적 픽셀은 750px 모델이고 375px
로 변환됩니다. iPhone 6P는 조금 이상합니다. 실제 픽셀의 너비는 실제로 1080px이지만 시스템 노출은 실제로 1242px이고 로 변환됩니다. >414px

screen.width/height 화면의 논리적 픽셀을 얻을 수 있습니다

레이아웃 뷰포트 레이아웃 뷰포트

방금 언급한 화면의 물리적 픽셀과 논리적 픽셀 모두 휴대폰 제조업체에서 설정하므로 우리는 할 수 없습니다. 여기서 중요한 점은 설정하는 것이므로 다음 두 뷰포트와 혼동하지 마십시오.

레이아웃 뷰포트는 브라우저의 너비와 동일합니다.
827873968358336e94a096e2f1413a99를 통해 설정할 수 있습니다.
기본적으로 레이아웃 표시 영역의 너비는 일반적으로 980px입니다.

document.documentElement.clientWidth은 레이아웃 뷰포트의 너비를 가져올 수 있습니다.

시각적 뷰포트 시각적 뷰포트

시각적 뷰포트는 휴대폰 화면만큼 큰 창이라고 볼 수 있지만 표시할 수 있는 픽셀 수는 화면의 논리적 픽셀 수만큼 많지 않습니다. .

휴대폰 화면의 논리적 픽셀이 수정되었지만 시각적 뷰포트는 이해하기 쉽지 않습니다. 예를 들어 iPhone5는 320px입니다.

그런데 화면 너비가 320px인데 980px 너비의 콘텐츠를 표시할 수 있으므로 시각적 창 너비는 980px입니다.
모바일 장치에 적합하지 않은 많은 웹 페이지를 휴대폰에서 열면 웹 페이지가 휴대폰 화면 너비로 축소되는 것을 볼 수 있습니다.

핵심은 320px 화면에 더 많은 콘텐츠를 표시할 수 있는 확대/축소입니다.
window.innerWidth은 시각적 표시 영역의 너비를 가져올 수 있습니다.

시각적 뷰포트의 너비는 45aa49d6cbf8d22d7b34d2ee5fabc687를 통해 설정할 수 있습니다.
시각적 뷰포트의 너비는 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배가 화면 너비이고, 그래서 시각적 뷰포트의 너비는 화면 너비의 두 배입니다.)

이때 레이아웃 뷰포트의 너비도 기본 980px가 아닌 화면 너비의 두 배입니다. 🎜>

요약:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!