의견 : HTML5를 사용하여 모바일 애플리케이션을 개발하는 것이 가장 좋습니다. 그러나 각 폰마다 다른 해상도와 화면 크기가 있습니다. 우리가 개발 한 응용 프로그램 또는 페이지 크기는 어떻게 다양한 고급 전화에서 사용하기에 적합 할 수 있습니까?
고급 휴대 전화 (Andriod, iPhone, iPod, Winphone 등)의 인기로 인해 모바일 인터넷 응용 프로그램의 개발도 사람들로부터 점점 더 많은 관심을 받고 있습니다. HTML5를 사용하여 모바일 애플리케이션을 개발하는 것이 최선의 선택입니다. 그러나 각 폰마다 다른 해상도와 화면 크기가 있습니다. 우리가 개발 한 응용 프로그램 또는 페이지 크기는 어떻게 다양한 고급 전화에서 사용하기에 적합 할 수 있습니까? HTML5 뷰포트 사용을 배우는 데 도움이 될 수 있습니다 ...
뷰포트 구문 소개 :
<!-html 문서->
<메타
내용 = "
높이 = [pixel_value | 장치 높이],
너비 = [pixel_value | Device-width],
초기 스케일 = float_value,
최소 스케일 = float_value,
최대 스케일 = float_value,
사용자-규모 = [예 | 아니요] ,
target-densitydpi = [dpi_value | Device-DPI | High-DPI | 중간 -DPI | 낮은 DPI]
"
/>
너비
뷰포트의 크기를 제어하며, 장치 폭 (장치 폭)과 같은 값 또는 특수 값으로 지정할 수 있습니다.이 값은 장치의 너비 (100%로 확장 될 때 CSS의 픽셀 단위.
키
너비에 해당하면 높이를 지정하십시오.
대상 밀도
화면의 픽셀 밀도는 화면 해상도에 의해 결정되며 일반적으로 인치당 도트 수 (DPI)로 정의됩니다. Android는 3 개의 스크린 픽셀 밀도를 지원합니다 : 낮은 픽셀 밀도, 중간 픽셀 밀도 및 높은 픽셀 밀도. 낮은 픽셀 밀도 스크린은 인치당 픽셀이 적고, 높은 픽셀 밀도 스크린은 인치당 픽셀이 더 많습니다. Android 브라우저 및 WebView에는 기본적으로 중간 픽셀 밀도가 있습니다.
아래는 Target DensityDPI 속성의 값 범위입니다
Device-DPI-장치의 원래 DPI를 대상 DP로 사용하십시오. 기본 확대 / 축소가 발생하지 않습니다.
High-DPI-HDPI를 대상 DPI로 사용하십시오. 중간 및 낮은 픽셀 밀도 장치가 그에 따라 감소됩니다.
Medium-DPI-MDPI를 대상 DPI로 사용하십시오. 높은 픽셀 밀도 장치가 그에 따라 확대되고, 픽셀 밀도 장치가 그에 따라 감소됩니다. 이것은 기본 대상 밀도입니다.
Low -DPI- MDPI를 대상 DPI로 사용하십시오. 중간 및 높은 픽셀 밀도 장치가 그에 따라 증폭된다.
<value> - 특정 DPI 값을 대상 DPI로 지정하십시오. 이 값의 범위는 70–400이어야합니다.
<!-html 문서->
<meta content = "target-densitydpi = device-dpi" />
<meta content = "target-densitydpi = high-dpi" />
<meta content = "target-densitydpi = medium-dpi" />
<meta content = "target-densitydpi = low-dpi" />
<meta content = "target-densitydpi = 200" />
Android 브라우저 및 WebView가 다른 화면의 픽셀 밀도를 기반으로 페이지를 확장하는 것을 방지하려면 Viewport의 대상 밀도 DPI를 장치 DPI로 설정할 수 있습니다. 이렇게하면 페이지가 확장되지 않습니다. 대신, 현재 화면의 픽셀 밀도에 따라 페이지가 표시됩니다. 이 경우 페이지가 화면에 적응할 수 있도록 장치의 너비와 일치하도록 뷰포트 너비를 정의해야합니다.
초기 규모
초기 스케일링. 즉, 페이지의 초기 줌 레벨입니다. 이것은 플로팅 포인트 값, 페이지 크기의 승수입니다. 예를 들어, 초기 스케일링을 1.0으로 설정하면 대상 밀도의 1 : 1 해상도로 웹 페이지가 표시됩니다. 2.0으로 설정하면이 페이지가 2x로 확대됩니다.
최대 규모
최대 줌. 이것이 최대 허용되는 스케일링 정도입니다. 이것은 또한 화면 크기에 비해 페이지 크기의 최대 승수를 나타내는 부동 소수점 값입니다. 예를 들어이 값을 2.0으로 설정하면이 페이지를 대상 크기에 비해 최대 2 배까지 확대 할 수 있습니다.
사용자 확장 가능
사용자는 줌을 조정합니다. 즉, 사용자가 페이지 줌 레벨을 변경할 수 있는지 여부입니다. 예로 설정하면 사용자는 변경할 수 있습니다. 그렇지 않으면 아니오입니다. 기본값은 예입니다. 아니오로 설정하면 스케일링이 불가능하기 때문에 최소 규모와 최대 규모가 모두 무시됩니다.
모든 스케일링 값은 0.01–10 범위 내에 있어야합니다.
예:
(화면 너비를 장치 너비로 설정하고 사용자가 수동으로 줌을 조정하는 것을 금지합니다)
<meta name = viewport content = width = device-width, 사용자-규모 = no />
(높은 주파수, 중간 주파수 및 저주파를 자동으로 확대하도록 화면 밀도를 설정하고 사용자를 수동으로 수동으로 조정하지 못하도록 금지)
<meta name = viewport content = width = device-width, target-densitydpi = high-dpi, 초기 스케일 = 1.0, 최소 규모 = 1.0, 최대-스케일 = 1.0, 사용자-규모 = no/>