HTML5 모바일 개발의 뷰포트 태그 및 관련 CSS 사용 분석

이 기사는 주로 HTML5 모바일 개발에서 뷰포트 태그 및 관련 CSS 사용 분석을 소개합니다. 뷰포트는 종종 뷰포트 또는 뷰포트라고하며 모바일 레이아웃 및 화면 적응에서 중요한 역할을합니다. 필요한 친구는 그것을 참조 할 수 있습니다.

모바일 프론트 엔드에서 일반적으로 언급 된 뷰포트 (Viewport)는 브라우저가 페이지 컨텐츠를 표시하는 화면 영역입니다. 관련된 몇 가지 중요한 개념은 DIP (장치 독립 픽셀 장치 로직 픽셀)와 CSS 픽셀 간의 관계입니다. 여기서 우리는 먼저 다음 개념을 이해합니다.

일반적으로 모바일 장치의 브라우저는 기본적으로 뷰포트 메타 태그를 설정하여 가상 레이아웃 뷰포트를 정의하여 휴대 전화에서 초기 페이지 디스플레이 문제를 해결합니다. iOS 및 Android는 기본적 으로이 뷰포트의 해상도를 980px로 설정하므로 PC의 웹 페이지는 기본적으로 전화로 표시 될 수 있지만 요소는 매우 작으며 웹 페이지는 일반적으로 기본적으로 수동으로 조정될 수 있습니다.

Visual Viewport (Visual Viewport)는 물리적 화면의 시각적 영역, 화면 디스플레이의 물리적 픽셀, 스크린의 동일한 크기, 픽셀 밀도가 높은 장치 및 하드웨어 픽셀을 제공합니다. 예를 들어, iPhone의 물리적 픽셀 :

iPhone5 : 640 * 1136

iPhone 6 : 750 * 1334

iPhone6 ​​Plus : 1242 * 2208

이상적인 뷰포트 및 딥 (장치 로직 픽셀)

이상적인 뷰포트는 일반적으로 화면 해상도라고하는 것입니다.

DIP (Device Logic Pixel)는 장치의 하드웨어 픽셀과 관련이 없습니다. 딥은 픽셀 밀도의 장치 화면에서 동일한 공간을 차지합니다.

예를 들어, MacBook Pro의 Retina 화면 디스플레이의 하드웨어 픽셀은 다음과 같습니다. 2880 * 1800입니다. 화면 해상도를 1920 * 1200으로 설정하면 이상적인 뷰포트의 너비 값은 1920 픽셀이고 DIP의 너비 값은 1920입니다. 장치 픽셀 비율은 1.5 (2880/1920)입니다. 논리 픽셀 너비와 장치의 물리적 픽셀 폭 (픽셀 해상도)의 관계는 다음 공식을 충족시킵니다.

휴대 전화 화면의 해상도는 일반적으로 허용되지 않습니다. 일반적으로 기본적으로 장치 제조업체가 설정 한 고정 값입니다. 다시 말해, DIP의 가치는 이상적인 뷰포트 (즉, 해상도)의 가치입니다. 예를 들어, iPhone의 화면 해상도 :

iPhone5 : 해상도 320*568, 물리적 픽셀 640*1136, @2x

iPhone6 ​​: 해상도 375*667, 물리적 픽셀 750*1334, @2x

iPhone6 ​​Plus : 해상도 414 * 736, Physical Pixels 1242 * 2208, @3x (실제 표시된 이미지 비율은 1080 × 1920으로 감소되며 특정 이유는 기사 끝에 도입됩니다).

페이지 레이아웃에 사용되는 CSS 픽셀 (PX) 장치. 스타일의 픽셀 크기 (예 : 너비 : 100px)는 CSS 픽셀에 지정되어 있습니다. CSS 픽셀과 DIP의 비율은 웹 페이지의 스케일링 비율입니다. 웹 페이지가 스케일링되지 않으면 CSS 픽셀은 DIP (Device Logic Pixel)에 해당합니다.

뷰포트 메타 태그를 사용하여 레이아웃을 제어하십시오

먼저, 뷰포트 메타 태그의 극단적 인 속성을 살펴 보겠습니다.