HTML5 모바일 애플리케이션 개발 - 뷰포트 역할(그림 및 텍스트)에 대한 자세한 소개

HTML5를 사용하여 모바일 애플리케이션이나 모바일 웹페이지를 개발할 때

섹션에 항상 다음 코드가 있습니다. 인터넷에서 많은 답변을 얻을 수 있습니다. 인터넷에서 몇 가지 소개를 모아 나중에 참고할 수 있도록 정리했습니다.

<meta>

뷰포트란 무엇입니까

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

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

　"viewport", 중국어로 번역하면 "viewport", 모바일 장치의 화면은 일반적으로 PC의 화면보다 훨씬 작다는 것을 모두가 알고 있습니다. 웹킷 브라우저는 더 큰 "가상" 창을 모바일 장치의 화면에 매핑합니다. 기본 가상 창은 너비가 980픽셀입니다(현재 표준). 대부분의 웹사이트의 경우) 너비)를 선택한 다음 특정 비율(3:1 또는 2:1)에 따라 크기를 조정합니다. 즉, 일반 웹 페이지를 로드할 때 웹킷은 먼저 브라우저 표준 980픽셀의 웹 페이지를 로드한 다음 너비를 490픽셀로 줄입니다. 이 축소는 전역 축소입니다. 즉, 페이지의 모든 요소가 축소됩니다. 아래 그림과 같이 모바일 기기에서 일반 기사 페이지의 효과는 다음과 같습니다.

　페이지는 왜곡 없이 980픽셀로 로드되지만 크기 조정 후 , 많은 것들이 기본적으로 육안으로는 보이지 않습니다.

그러면 웹킷의 뷰포트를 인위적으로 변경할 수 있을까요? 물론

와 사이에 다음 뷰포트 코드를 추가할 수도 있습니다.

<meta name="viewport" content="width=500"/>

force viewport size 명령을 추가한 효과를 살펴보겠습니다. 페이지는 어떻습니까? 아래 그림과 같이

그렇다면 더 좋은 방법은 없을까요? 예를 들어, 우리는 모바일 장치의 화면 크기를 자동으로 감지한 다음 그에 따라 콘텐츠를 조정합니다. 아래 코드를 보면 device-width가 모바일 장치의 화면 너비를 자동으로 감지합니다:

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width"</span> <span style="color: #0000ff;">/><br/></span>

위 내용은 HTML5 모바일 애플리케이션 개발 - 뷰포트 역할(그림 및 텍스트)에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!