뷰포트는 무엇입니까?
모바일 브라우저는 페이지를 가상 창 (Viewport)에 배치합니다. 일반적으로 가상 창 (Viewport)은 화면보다 넓기 때문에 각 웹 페이지가 각 웹 페이지를 매우 작은 창으로 짜낼 필요가 없습니다 (이는 모바일 브라우저에 최적화되지 않은 웹 페이지의 레이아웃을 파괴합니다). 사용자는 패닝 및 축소를 통해 웹 페이지의 다른 부분을 볼 수 있습니다. Safari Browser의 모바일 버전은 최근 웹 개발자가 Viewport의 크기와 줌을 제어 할 수있는 Meta Of Viewport 태그를 도입했으며 기본적으로 기본적으로이를 지원할 수 있습니다.
뷰포트 기본
모바일 웹 페이지에 최적화 된 일반적으로 사용되는 페이지의 뷰포트 메타 태그는 다음과 같습니다.
<meta name = viewport content = width = device-width, 초기 스케일 = 1, 최대 스케일 = 1 ″>
너비 : 600이면 지정할 수있는 뷰포트의 크기를 제어합니다.
높이 : 너비에 해당하고 높이를 지정합니다.
초기 규모 : 초기 스케일링, 즉 페이지가 처음로드 된 스케일링 비율입니다.
최대 규모 : 사용자가 확장 할 수있는 최대 규모.
최소 규모 : 사용자가 확장 할 수있는 최소 스케일.
사용자 스케일 가능 : 사용자가 수동으로 확장 할 수 있습니다
Viewport에 대한 몇 가지 질문
Viewport는 iOS의 고유 한 속성 일뿐 만 아니라 Android 및 Winphone의 뷰포트이기도합니다. 그들이 해결하고자하는 문제는 동일합니다. 즉, 장치의 실제 해상도를 무시하고 DPI를 통해 직접 무시하여 물리적 크기와 브라우저 간의 해상도를 재설정합니다.이 브라우저는 장치의 해상도와 관련이 없습니다. 예를 들어, 3.5 인치 -320 * 480, iPhone4, 3.5 인치 -640 * 960, 9.7 인치 -1024 * 768의 iPhone4, 다른 해상도와 물리적 크기의 iPad2를 가진 iPhone3 GS를 얻을 수 있으므로 브라우저에서 동일한 해상도를 갖도록 뷰포트를 설정할 수 있습니다. 예를 들어, 귀하의 웹 사이트는 800px 폭으로, 너비 = 800의 Viewport를 설정하여 웹 사이트 가이 세 가지 장치 전체 화면에 웹 사이트를 표시하도록 할 수 있습니다.
뷰포트에 대해 약간의 이해를 가진 모든 학생은 이미 위의 지식을 이미 이해해야한다고 생각합니다. 이것이 제가 오늘 이야기하고 싶은 요점이 아닙니다. 내가 설명하고 싶은 것은 iOS 및 Android의 뷰포트 성능 차이점 중 일부입니다.
Viewport에 대한 온라인 지식을 검색 할 때 기본적으로 다음 모든 정보입니다.
<meta name = viewport content = width = device width, 초기 스케일 = 1.0, 최대 규모 = 1.0, 최소 규모 = 1.0, 사용자-규모 = no />
이 코드는 뷰포트의 너비가 물리적 장치의 실제 해상도와 같으며 사용자가 스케일링 할 수 없음을 의미합니다. 이것이 YIDU의 주류 웹 앱이 설정된 방식입니다. 그 기능은 의도적으로 뷰포트를 포기하고 페이지를 확장하지 않는 것입니다. 이러한 방식으로 DPI는 장치의 실제 해상도와 동일해야합니다. 스케일링이 없으면 웹 페이지가 더 높고 더 섬세하게 나타납니다. PS를하는 학생들은 500 * 500 포인트로 직접 1000 * 1000의 사진을 확대 할 때 어떻게 될지 알아야합니까? 그림의 왜곡을 피해서는 안됩니다.
그러나 내가하고 싶은 응용 프로그램은 반대이며 뷰포트와 줌을 사용해야합니다. 실제 해상도가 무엇이든 물리적 크기가 무엇이든, 브라우저에 통합 해상도가 있고 사용자가 확대 할 수 없기를 바랍니다. 내가 테스트했던 장치는 iPhone4, iPad2, HTC G11, Aquos Phone (Android System), Asus Android Pad, Dell Winphone입니다. 다음과 같은 문제가 발생했습니다.
1) Viewport가 디스플레이없이 설정되면 기본 너비는 980입니다. 페이지의 모든 요소가 980 미만인 경우 너비는 980입니다. 페이지의 너비가 980을 초과하면 너비는 최대 너비와 같습니다. 요컨대, 전체 페이지는 기본적으로 왼쪽에서 오른쪽으로 표시 될 수 있습니다. 예를 들어 뷰포트를 설정하는 경우, 예를 들어 <meta name = viewport content = user-scalable = no />과 같은 사용자-스케일 가능 = 아니오를 설정하면 iOS의 너비는 여전히 980으로 표시됩니다 (즉, 기본적으로 DPI에 의해 스케일링 될 것입니다).
2) iOS 장치의 경우 설정 너비가 적용될 수 있지만 Android의 경우 설정 너비가 적용되지 않습니다. DPI의 스케일링 비율은 설정 한 너비와 설정 한 실제 해상도에 의해 자동으로 계산됩니다. 그러나 Android에서는 폭이 잘못되었습니다. 설정할 수있는 것은 특수 필드 대상 밀도 DPI입니다. 즉, 브라우저 너비, 장치 실제 폭 및 DPI의 세 가지 변수가 있습니다. 공식을 사용하여 공식을 사용하여 (실제 관계가 아니라, 간단한 설명에만 사용하십시오) 장치 실제 너비 * DPI = 브라우저 너비, 여기서 세 가지 변수는 작동 할 수없는 알려진 값이며 다른 변수 중 하나를 설정할 수 있습니다. iOS에서 변경할 수있는 것은 브라우저 너비, DPI가 자동으로 생성되고 Android에서는 DPI이며 브라우저 너비가 자동으로 생성됩니다. Android의 경우 너비를 어떻게 설정하든 브라우저 너비에 영향을 미치지 않습니다.
PS : 여기서는 또 다른 이상한 문제에 대해 이야기 할 것입니다. HTC의 G11에서 (HTC의 전화에 대해서만이 문제가 있고 다른 테스트가 없음), DPI가 너비를 표시하지 않고 설정되어 있지 않은 경우, 사용자-스케일 가능 = 아니요, <메타 이름 = viewport content = target-densitydpi = 300, 사용자-스케일 가능 = 아니오 />, 사용자는 스크린에서 Zooming을 방해 할 수 없습니다. 너비 값을 표시 할 수 있도록 설정해야합니다. 이 값은 Android의 브라우저 화면 해상도에 영향을 미치지 않지만 (여전히 iOS에 영향을 미칩니다), 우리는 여전히 설정해야 하며이 값은 320보다 크지 않아야합니다. 320보다 작거나 동일하다면 사용자 규모 = NO는 효과적 일 수 없습니다. 이 문제는 HTC의 G11 전화에만 나타나며 Aquos 전화에는 그러한 문제가 없습니다. Android와 호환되는 것은 실제로 두통입니다 @_ @. 앞으로 얼마나 많은 함정이 있을지 모르겠습니다. Winphone에서는 결과가 훨씬 이상합니다. 뷰포트의 너비에 대해 480보다 큰 값을 설정하고 사용자-규모 = NO는 실패합니다. 값이 480보다 작은 경우 사용자-규모 = NO가 적용됩니다. 그러나 뷰포트 너비를 얼마나 많이 설정하든 윈폰에 표시되는 실제 폭에 영향을 미치지 않으며 Target DensityDPI를 통해 영향을 미치지 않습니다. 설정 너비, 480 미만인 경우 화면이 확대되지만 감소 척도는 내가 예상 한 것과 완전히 다릅니다. 나는 그것이 어떤 규칙이 확대되는지 모르겠습니다. 이것이 윈폰의 문제인지 Dell 구현의 문제인지 모르겠습니다.
3)이 기사는 이전 기사와 직접 관련되어 있어야합니다. iOS 장치가 수평적이고 수직 인 경우 DPI를 자동으로 조정합니다. 수평이든 수직이든, 브라우저 너비가 뷰포트에서 설정된 값과 같을 수 있습니다. 따라서 수평 및 수직 스크린이 수평 및 세로 화면 인 경우 페이지에 표시된 컨텐츠의 크기가 자동으로 스케일 및 변경됩니다. 안드로이드 폰이 수평 및 세로 화면 인 경우 DPI가 변경되지 않으며 수평 및 세로 화면이 있으면 웹 페이지가 확대되지 않습니다. 이러한 이유로 iOS는 수평 및 수직 페이지에 스크롤 막대가 생성되지 않도록 보장 할 수 있으며 전체 화면이 표시되지만 Android는이를 보장 할 수 없습니다. 수평 및 수직 스크린이 가득 차지 못하고 그 반대도 마찬가지입니다.
4) iOS 장치의 경우 너비 디스플레이가 정의되고 페이지의 가장 넓은 위치가 너비를 초과하면 너비가 유효하지 않으며 가장 넓은 너비로 표시됩니다 (스크롤 막대가 없음). 그러나 현재 매우 이상한 문제가 발생합니다. 휴대 전화의 수평 및 수직 화면을 여러 번 전환 한 후에는 페이지가 자동으로 커지고 스크롤 막대가 나타나지만 실제로 확대 된 너비는 설정 한 너비와 관련이 없습니다. 이런 일이 발생하지 않도록하려면 너비의 너비가 페이지의 가장 넓은 부분보다 크게 설정되거나 동일하게 설정해야합니다.