HTML 메타 뷰포트 속성에 대한 자세한 설명_HTML/Xhtml_웹페이지 제작

뷰포트란 무엇인가요

모바일 브라우저는 페이지를 가상의 "창"(뷰포트)에 배치합니다. 일반적으로 이 가상의 "창"(뷰포트)은 화면보다 넓기 때문에 각 웹페이지를 압축할 필요가 없습니다. . 매우 작은 창(모바일 브라우저에 최적화되지 않은 웹페이지의 레이아웃을 손상시킬 수 있음)에서 사용자는 웹페이지의 다른 부분을 보기 위해 이동 및 확대/축소할 수 있습니다. Safari 브라우저의 모바일 버전에는 최근 웹 개발자가 뷰포트의 크기와 확대/축소를 제어할 수 있는 뷰포트 메타 태그가 도입되었습니다. 다른 모바일 브라우저도 기본적으로 이를 지원합니다.

뷰포트 기본

모바일 웹페이지에 최적화된 페이지에 일반적으로 사용되는 뷰포트 메타 태그는 대략 다음과 같습니다.



너비: 컨트롤 뷰포트 크기는 600과 같은 값으로 지정하거나 장치 너비(100%로 확장할 때 CSS 픽셀 단위)인 device-width와 같은 특수 값으로 지정할 수 있습니다.
높이: 너비에 따라 높이를 지정합니다.
initial-scale: 초기 크기 조정 비율, 즉 페이지가 처음 로드될 때의 크기 조정 비율입니다.
maximum-scale: 사용자가 확대/축소할 수 있는 최대 배율입니다.
최소 배율: 사용자가 확대/축소할 수 있는 최소 배율입니다.
사용자 확장 가능: 사용자가 수동으로 확대/축소할 수 있는지 여부

뷰포트에 대한 몇 가지 질문

뷰포트는 iOS의 고유한 속성일 뿐만 아니라 Android 및 Winphone에도 뷰포트가 있습니다. 그들이 해결하려는 문제는 똑같습니다. 즉, 기기의 실제 해상도를 무시하고 dpi를 통해 물리적 크기와 브라우저 간의 해상도를 직접 재설정하는 것입니다. 이 해상도는 기기의 해상도와 아무런 관련이 없습니다. 예를 들어 3.5인치 320*480 iPhone 3 gs, 3.5인치 640*960 iPhone 4 또는 9.7인치 1024*768 iPad 2를 사용하는 경우 기기의 해상도와 물리적 크기는 서로 다르면 뷰포트를 통해 브라우저에서 동일한 해상도를 갖도록 설정할 수 있습니다. 예를 들어, 웹 사이트 너비가 800px인 경우 뷰포트 너비를 800으로 설정하면 웹 사이트가 세 가지 다른 장치에서 전체 화면에 표시될 수 있습니다.

뷰포트에 대한 지식이 조금이라도 있는 학생이라면 위의 지식을 이미 알고 있어야 한다고 생각합니다. 오늘 제가 말씀드리고 싶은 내용은 이것이 아닙니다. 제가 설명하고 싶은 것은 iOS와 Android의 뷰포트 성능에 약간의 차이가 있다는 것입니다.

인터넷에서 뷰포트에 대한 지식을 검색하면 기본적으로 모든 정보는 다음과 같습니다.



이 코드의 의미는 뷰포트의 너비를 물리적 장치의 실제 해상도와 동일한 뷰포트가 켜져 있으며 사용자 크기 조정이 허용되지 않습니다. 모든 주류 웹 앱은 이와 같이 설정됩니다. 그 기능은 의도적으로 뷰포트를 포기하고 페이지 크기를 조정하지 않는 것입니다. 이러한 방식으로 dpi는 크기 조정 없이도 장치의 실제 해상도와 동일해야 합니다. 더 높게 나타납니다. PS를 플레이하는 학생들은 1000*1000 그림을 500*500포인트로 직접 확장하면 어떤 모습일지 모두 알고 계시겠죠? 그림의 왜곡은 피할 수 없습니다.

그런데 제가 만들고 싶은 애플리케이션은 뷰포트와 확대/축소를 사용해야 합니다. 실제 해상도가 무엇이든, 물리적 크기가 무엇이든, 브라우저에서 균일한 해상도를 갖고 사용자가 확대/축소하는 것을 허용하지 않기를 원합니다. 테스트에 사용한 기기는 iPhone 4, iPad 2, HTC의 g11, 제조사를 알 수 없는 aquos 폰(안드로이드 시스템), ASUS의 안드로이드 패드, Dell의 winphone 등이었는데, 그 과정에서 다음과 같은 문제에 직면했습니다.

1) 뷰포트가 명시적으로 설정되지 않은 경우 너비는 기본적으로 980으로 설정됩니다. 페이지에 있는 모든 요소의 너비가 980보다 작으면 너비는 980입니다. 페이지의 가장 넓은 위치가 980을 초과하면 너비는 최대 너비와 같습니다. 즉, 기본적으로 전체 페이지를 왼쪽에서 오른쪽으로 표시할 수 있습니다. 예를 들어 와 같이 user-scalable=no를 간단히 설정하면 뷰포트가 설정된 경우 너비는 ios에서 계속 980으로 표시되지만(즉, 기본적으로 dpi로 크기가 조정됩니다) android 및 winphone에서는 스케일링 후 브라우저 해상도가 실제 설정 해상도와 일치하지 않습니다.

2) iOS 기기의 경우 폭 설정이 적용되지만, 안드로이드의 경우 폭 설정이 적용되지 않습니다. iOS 기기의 경우 설정한 너비와 실제 해상도를 기준으로 스케일링 비율, 즉 dpi가 자동으로 계산되지만, Android에서는 설정한 너비가 유효하지 않습니다. 자세한 내용은 target-densitydpi를 참조하세요. http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html. 즉, 브라우저 너비, 장치 실제 너비, dpi의 세 가지 변수가 있습니다. 단순히 수식을 사용하여 이들 사이의 관계를 표현해 보겠습니다.(단순한 설명을 위한 실제 관계가 아닙니다.) 장치 실제 너비 * dpi = 브라우저 너비 여기서 세 가지 변수 중 장치의 실제 너비는 우리가 연산할 수 없는 알려진 값입니다. , 다른 두 변수 중 하나를 설정하여 다른 변수에 영향을 미칠 수 있습니다. iOS에서 변경할 수 있는 것은 브라우저 너비이고, Android에서는 dpi가 자동으로 생성됩니다. 자동으로 생성됩니다. Android의 경우 너비를 어떻게 설정하더라도 브라우저 너비에는 영향을 미치지 않습니다.

ps: 여기서 또 다른 이상한 문제에 대해 이야기하겠습니다. HTC의 g11(저는 이 HTC 휴대폰만 갖고 있고 다른 휴대폰은 테스트하지 않았습니다)에서 너비를 명시적으로 설정하지 않고 dpi를 설정하면 user -scalable=no는 적용되지 않습니다. 즉, 사용자가 화면 크기를 조정하는 것을 막을 수 없습니다. 너비 값을 명시적으로 설정해야 합니다. 이 값은 Android의 브라우저 해상도에 아무런 영향을 미치지 않지만(iOS에는 여전히 영향을 미칩니다) 여전히 설정해야 하며 이 값은 320보다 커야 합니다. 320보다 작거나 같으면 user-scalable=no가 적용되지 않습니다. 이 문제는 HTC의 g11 휴대폰에서만 발생하며 aquos 휴대폰에서는 발생하지 않습니다. 안드로이드와의 호환성이 정말 골치아프네요 @_@ 앞으로 얼마나 많은 함정이 있을지 모르겠습니다. winphone에서는 결과가 더 이상합니다. 뷰포트의 너비를 480보다 큰 값으로 설정하면 user-scalable=no가 유효하지 않지만, 480보다 작은 값을 설정하면 user-scalable=no는 유효하지 않습니다. 효과. 그러나 뷰포트 너비에 어떤 값을 설정하더라도 winphone에서 실제로 표시되는 너비에 예상되는 영향을 미치지 않으며 target-densitydpi도 영향을 미치지 않습니다. 너비를 480보다 작게 설정하면 화면 크기가 조정되는데, 크기 조정 비율이 예상한 것과 전혀 다릅니다. 이것이 Winphone 문제인지 Dell 구현 문제인지는 모르겠습니다.

3) 이 기사는 이전 기사와 직접 관련이 있어야 합니다. iOS 기기가 가로 또는 세로 화면에 있을 때 가로 화면이나 세로 화면에 관계없이 자동으로 dpi를 조정할 수 있습니다. 브라우저 너비는 뷰포트에 설정된 값과 동일하므로 화면이 가로 또는 세로 모드일 때 페이지에 표시되는 콘텐츠의 크기가 자동으로 조정되고 변경됩니다. Android 휴대폰이 가로 또는 세로 모드인 경우 dpi는 변경되지 않으며 화면이 가로 또는 세로 모드인 경우 웹 페이지가 확대되지 않습니다. 이러한 이유로 iOS는 가로 및 세로 화면 페이지에 스크롤 막대가 없어 화면을 채우는 것을 보장할 수 있지만 Android는 화면이 가로로 가득 차면 세로로 전체 화면이 될 수 없으며 그 반대의 경우도 마찬가지입니다.

4) iOS 기기의 경우 너비 표시가 정의되어 있고 페이지의 가장 넓은 위치가 너비를 초과하는 경우 너비가 유효하지 않으며 여전히 가장 넓은 너비에 따라 표시됩니다(스크롤 막대가 없음) ). 그런데 이때 매우 이상한 문제가 발생합니다. 휴대폰 화면을 가로와 세로로 여러 번 전환하면 페이지가 자동으로 확대되고 스크롤 막대가 나타나는데 실제로는 확대된 너비가 그렇지 않습니다. 설정한 너비와 동일합니다. 이를 방지하려면 너비를 페이지의 가장 넓은 부분보다 크거나 동일하게 설정해야 합니다.