모바일 장치의 뷰포트 호환성 소개

모바일 장치의 뷰포트는 레이아웃 뷰포트, 비주얼 뷰포트 및 이상적인 뷰포트

의 세 가지 범주로 나뉩니다.

이상적인 뷰포트는 모바일에 가장 적합합니다. devices 뷰포트, 이상적인 뷰포트의 너비는 모바일 장치의 화면 너비와 같습니다. 특정 요소의 너비가 CSS에서 이상적인 뷰포트의 너비(단위는 px)로 설정되어 있는 한 너비는 모바일 장치의 화면 너비와 같습니다. 이 요소의 너비는 장치 화면의 너비, 즉 너비가 100%인 효과입니다.

이상적인 뷰포트의 중요성은 화면 해상도에 관계없이 사용자가 수동으로 확대/축소하거나 가로 스크롤 막대를 사용하지 않고도 이상적인 뷰포트를 위해 설계된 웹사이트를 사용자에게 완벽하게 표시할 수 있다는 것입니다.

모든 iPhone의 이상적인 뷰포트 너비는 320px이므로 H5 페이지를 모든 iPhone 및 Android 모델에 적용하는 간단하고 대략적인 방법은 다음과 같습니다. 뷰포트를 설정하세요

메타 뷰포트 태그는 Apple이 모바일 장치의 뷰포트 문제를 해결하기 위해 Safari 브라우저에 처음 도입했습니다. 나중에 Android 및 주요 브라우저 제조업체도 이에 따라 메타 뷰포트에 대한 지원을 도입했습니다. 사실은 이 기능이 여전히 매우 유용하다는 것을 입증했습니다. Apple 사양에서 메타 뷰포트에는 다음과 같이 6가지 속성(콘텐츠 속성 및 값에서 해당 항목을 호출)이 있습니다.

width	레이아웃 뷰포트의 너비를 양의 정수로 설정합니다. 또는 문자열 "width-device"
initial-scale	페이지의 초기 확대/축소 값을 설정합니다. 이 값은 소수점 이하 자릿수를 사용할 수 있는 숫자입니다.
minimum-scale	에서 허용하는 최소 확대/축소 값 user 는 숫자이며 소수를 사용할 수 있습니다.
maximum-scale	은 사용자의 최대 확대/축소 값을 허용합니다. 숫자는 소수를 사용할 수 있습니다.
height	레이아웃 뷰포트의 높이를 설정합니다. 이 속성은 우리에게 중요하지 않으며 거의 ​​사용되지 않습니다.
user-scalable	사용자가 확대/축소할 수 있는지 여부에 관계없이 값은 "no" 또는 "yes"이며 no는 허용되지 않음을 의미하고 yes는 허용됨을 의미합니다

이러한 속성은 동시에, 개별적으로 또는 혼합하여 사용할 수 있습니다. 여러 속성을 동시에 사용하는 경우 쉼표로 구분하세요.

위 내용은 모바일 장치의 뷰포트 호환성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!