모바일 단말기의 html5 화면 적응 문제 사례에 대한 토론_html5 튜토리얼 기술

예전에는 HTML5가 가장 핫한 기술이었는데, html5 기술이 추가되면서 모바일 단말이 더욱 유연해졌습니다. 모두가 "한 번 쓰고, 더 많이 실행하세요"를 좋아하지만, 올해 Zuckerberg가 html5에서 실수를 인정한 이후로 우리는 또한 HTML5는 신흥 기술로서 여전히 HTML5의 효율성과 같은 많은 불완전성을 갖고 있으며 이는 많은 프로그래머들이 불평할 수 없을 만큼 충분하며 소비자도 참을 수 없다는 점을 분명히 인식하십시오. 그러나 HTML5가 우리에게 좋은 웹 기술을 가져왔다는 것은 부인할 수 없는 사실입니다. 이는 미래 개발 추세이며 끝이 아닙니다. 우리가 할 수 있는 일은 HTML5를 개선하고 더 좋고 효율적인 코드를 작성하는 것입니다.

자, 쓸데없는 말을 많이 했으니 이제 본론으로 들어가겠습니다. 안드로이드 프로그래머들에게는 가장 골치 아픈 문제가 바로 안드로이드의 적응 문제입니다. 이를 위해 모두가 바다를 건너 마법의 힘을 발휘하고 있습니다. 여기 HTML5에서는 이 문제를 더 잘 해결할 수 있습니다. 모바일 브라우저는 페이지를 가상 "창"(뷰포트)에 배치합니다. 일반적으로 이 가상 "창"(뷰포트)은 화면보다 넓으므로 각 웹 페이지를 작은 창에 넣을 필요가 없습니다. 모바일 브라우저에 최적화되지 않은 웹 페이지의 레이아웃), 사용자는 웹 페이지의 다른 부분을 보기 위해 이동 및 확대/축소할 수 있습니다. 일반적으로 사용되는 뷰포트 레이아웃은 다음과 같습니다.

구체적인 의미는 다음과 같습니다.
width: control viewport 크기는 600과 같은 값이나 장치의 너비인 device-width와 같은 특수 값으로 지정할 수 있습니다. 기본 가상 창은 980픽셀입니다. 너비(현재 일부 웹사이트의 가장 큰 표준 너비)를 지정한 다음 특정 비율(3:1 또는 2:1)에 따라 크기를 조정합니다.

높이: 너비에 해당하며 높이를 지정합니다.

target-densitydpi: 화면 픽셀 밀도는 화면 해상도에 의해 결정되며 일반적으로 인치당 도트 수(dpi)로 정의됩니다. Android는 낮은 픽셀 밀도, 중간 픽셀 밀도, 높은 픽셀 밀도의 세 가지 화면 픽셀 밀도를 지원합니다. 픽셀 밀도가 낮은 화면은 인치당 픽셀 수가 더 적은 반면, 픽셀 밀도가 높은 화면은 인치당 픽셀이 더 많습니다. Android 브라우저 및 WebView 기본 화면은 중간 픽셀 밀도입니다.

target-densitydpi 속성의 값 범위는 다음과 같습니다.

device-dpi – 기기의 원래 dpi를 대상 dp로 사용합니다. 기본 크기 조정이 발생하지 않습니다.

high-dpi – hdpi를 대상 dpi로 사용합니다. 중간 픽셀 밀도와 낮은 픽셀 밀도 장치는 그에 따라 축소됩니다.

medium-dpi – mdpi를 대상 dpi로 사용합니다. 픽셀 밀도가 높은 장치는 그에 따라 확장되고, 픽셀 밀도가 있는 장치는 그에 따라 축소됩니다. 이것이 기본 목표 밀도입니다.

low-dpi - mdpi를 목표 dpi로 사용합니다. 중간 픽셀 밀도와 높은 픽셀 밀도 장치는 그에 따라 확장됩니다.

– 특정 dpi 값을 대상 dpi로 지정합니다. 이 값은 70~400 범위에 있어야 합니다.







Android 브라우저와 WebView가 다양한 화면의 픽셀 밀도에 따라 페이지 크기를 조정하는 것을 방지합니다. , 뷰포트의 target-densitydpi를 device-dpi로 설정할 수 있습니다. 이렇게 하면 페이지 크기가 조정되지 않습니다. 대신 페이지는 현재 화면의 픽셀 밀도에 따라 표시됩니다. 이 경우 페이지가 화면에 맞도록 뷰포트의 너비를 장치의 너비와 일치하도록 정의해야 합니다.
initial-scale: 초기 크기 조정 비율, 즉 페이지가 처음 로드될 때의 크기 조정 비율입니다.
maximum-scale: 사용자가 확대/축소할 수 있는 최대 배율(0~10.0 범위)입니다.
최소 배율: 사용자가 확대/축소할 수 있는 최소 배율(0~10.0 범위)입니다.
사용자 확장 가능: 사용자가 수동으로 확대/축소할 수 있는지 여부에 따라 값은 다음과 같습니다. ①예, true는 사용자가 확대/축소할 수 있음, ②아니요, false는 사용자가 확대/축소할 수 없음, 아니요로 설정하면 최소 규모 및 최대 -scale은 스케일링이 전혀 불가능하므로 무시됩니다.

모든 스케일링 값은 0.01~10 범위 내에 있어야 합니다.

이러한 속성을 설정하고 html5의 메타 속성에 넣어 휴대폰 화면에 맞게 조정합니다. 예:

코드 복사

코드는 다음과 같습니다.

[mw_shl_code=xhtml,true]content="
height = [pixel_value | device-height] ,
width = [pixel_value | device- width ] ,
초기 스케일 = float_value ,
최소 스케일 = float_value ,
최대 스케일 = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | low-dpi]
"
/>[/mw_shl_code]

다음은 실제 사용 예입니다. :

(화면 너비를 기기 너비로 설정하고 사용자가 수동으로 확대/축소 조정하는 것을 금지)

코드 복사

코드는 다음과 같습니다.

>
(설정 화면 Density는 고주파, 중주파, 저주파에 대해 자동으로 스케일링되며, 사용자가 수동으로 스케일링을 조정할 수 없습니다.)

코드 복사코드는 다음과 같습니다.