HTML5 Building Touch Screen 웹 사이트의 웹 사이트 규모에 대한 토론

이 기사는 두 부분으로 나뉩니다. 첫 번째 부분은 크로스 플랫폼 웹 사이트의 타당성에 대해 설명하고 두 번째 부분은 Viewport 설정 방법에 대해 설명합니다.

라벨 너비와 높이가 적응할 수 있다는 것은 사실입니다. 우리는 이것을 매우 일찍 할 수 있습니다. 그러나 많은 전통적인 PC 웹 사이트가 여전히 너비를 고정한다는 것을 알게 될 것입니다. (Taobao는 1000px 너비, Sohu 950px를 사용합니다 ...) 웹 사이트가 너비와 높이에 적응하도록하는 이유는 무엇입니까? 브라우저에 의해 라벨 너비를 임의로 늘리게되면 경험이 매우 저하되기 때문입니다. 브라우저가 100px로 스케일링 될 때 왼쪽 막대가 국수로 변하는 것을 원하지 않습니다. 브라우저가 과도하게 늘어날 때 웹 사이트가 초등학생을위한 넷북처럼 보이기를 원하지 않을 것입니다. 따라서 크로스 플랫폼을 달성하기 위해 레이블 적응에 의존하는 것은 비현실적 이며 사용자 경험을 희생합니다. 여러 번 폭과 높이를 고정해야합니다.

우리는 HTML5 장치를 사용하여 현재 장치가 휴대폰인지 태블릿인지 확인하고 그에 따라 해당 CSS를로드합니다. 예를 들어 : 장치가 태블릿임을 감지하면 세 개의 열을 가로로 표시 할 수 있으며 휴대 전화 인 경우 하나의 열만 표시합니다. 이것은 어렵지 않지만 구현하기가 매우 복잡합니다. 우리는 다른 장치에 대한 여러 템플릿 세트를 개발할 필요가있을뿐만 아니라 그림 크기를 처리해야합니다. 이와 관련하여 Boston Globe가 HTML5를 사용하여 반응 형 디자인을 구현하는 방법을 알 수 있습니다.

일반적으로 크로스 플랫폼 웹 사이트를 달성하는 것은 너무 비싸고 대부분의 웹 사이트에서 제한됩니다. 그것이 가능하는지 여부는 웹 사이트의 실제 상황에 따라 다릅니다.

모바일 브라우저는 페이지를 가상 창 (Viewport)에 배치합니다. 일반적으로 가상 창 (Viewport)은 화면보다 넓기 때문에 각 웹 페이지가 각 웹 페이지를 매우 작은 창으로 짜낼 필요가 없습니다 (이는 모바일 브라우저에 최적화되지 않은 웹 페이지의 레이아웃을 파괴합니다). 사용자는 패닝 및 축소를 통해 웹 페이지의 다른 부분을 볼 수 있습니다. 모바일 브라우저는 Viewport의 메타 태그를 도입하여 웹 개발자가 뷰포트의 크기와 스케일링을 제어 할 수 있도록했습니다.

CSS 픽셀 : 브라우저에서 사용하는 초록 단위는 주로 웹 페이지에 컨텐츠를 그리는 데 사용됩니다.

장치 픽셀 : 화면의 최소 물리적 단위를 표시하고 각 DP에는 자체 색상과 밝기가 포함되어 있습니다.

전화 화면에서 동등한 값을 가진 CSS 픽셀의 양은 고정되지 않았으며 많은 속성에 따라 다릅니다. 분석 및 요약 후, 우리는 다음과 같은 공식을 제시 할 수 있습니다 : 1 CSS Pixels = (DevicePixelratio)^2 장치 픽셀 (^2는 Square를 의미합니다.

때때로 DPI라고도하는 PPI는 인치당 픽셀 수를 나타냅니다. 값이 높을수록 디스플레이가 이미지 표시 될 수 있습니다. (참고 : 여기서 픽셀은 장치 픽셀을 참조합니다.) PPI의 의미를 파악한 후 PPI의 계산 방법을 쉽게 이해할 수 있습니다. 먼저 휴대 전화 화면의 대각선 등가 픽셀을 계산 한 다음 대각선을 배치해야합니다 (휴대 전화 화면의 크기는 휴대폰 화면의 대각선 라인의 길이입니다). PPI를 얻을 수 있습니다. 정확한 계산 공지 사항은 아래 그림을 참조하십시오. 더 흥미로운 점은 공식에 따라 계산 된 iPhone 4의 PPI가 330이며, 이는 Apple이 공식적으로 발표 한 326보다 약간 높다는 것입니다.

유사하게, HTC G7을 예로 들어, 480*800 및 3.7 인치의 해상도는 252의 PPI로 계산된다.

다른 밀도 간격이 다른 기본 스케일링 비율에 해당하기 때문에 휴대폰 장치가 속한 밀도 간격을 알기 위해 PPI를 계산합니다. 이는 매우 중요한 개념입니다.

위의 그림에서 120-160 사이의 PPI가있는 휴대 전화는 저밀도 휴대 전화로 분류되고 160-240은 중간 밀도로 분류되고 240-320은 고밀도로 분류되며 320 이상은 초고 밀도로 분류됩니다 (Apple은 상류 이름을 부여했습니다).

이러한 밀도는 특정 스케일링 값에 해당합니다. 우리가 가장 친숙한 iPhone 4 또는 4를 가져 가십시오. PPI는 326이며, 이는 매우 높은 밀도의 휴대 전화입니다. 너비가 320px의 페이지를 작성하고 iPhone에 표시 할 때 실제로 전체 너비임을 알 수 있습니다. 이는 기본적으로 640px, iPhone 4 또는 4S의 너비는 정확히 640px이기 때문에 페이지가 기본적으로 두 번 확대되기 때문입니다.

그림은 안드로이드 폰의 통계 데이터이기 때문에 고밀도 유형을 돌립니다. 국내 안드로이드 폰 시장에서 고밀도 장치는 대다수의 시장 점유율을 차지합니다. 이것은 매우 중요한 요점이며 Android WebApps를 수행 할 때주의를 기울여야하는 핵심 요점이기도합니다.

Viewport에는 다음과 같이 총 5 개의 속성이 있습니다.

<meta name = "Viewport"

내용 = "

높이 = [pixel_value | 장치 높이],

너비 = [pixel_value | Device-width],

Initial-Scale = float_value, 최소 스케일 = float_value, maximum-scale = float_value, maximum-scale = float_value,

사용자-규모 = [예 | 아니요] ,

target-densitydpi = [dpi_value | Device-DPI | High-DPI | 중간 -DPI | 낮은 DPI] " />

이러한 특성 중에서는 장치의 기본 스케일링을 변경할 수있는 Target DensityDPI 에 중점을 둡니다. Medium-DPI는 Target-DensityDPI의 기본값입니다. 대상 densitydpi = device-dpi를 정의하면 장치가 실제 DPI에 따라 페이지를 렌더링합니다. 예를 들어, 320*480 사진이 iPhone 4에 배치되면 기본적으로 화면을 차지하지만 Target DensityDPI = DVICE-DPI가 정의되면 iPhone 4의 해상도가 640*960이기 때문에 화면의 1/4 (정사각형의 절반)만을 설명합니다.

320px 와이드 디자인 드래프트에 따라 페이지를 만들고 설정을 만들지 않으면 페이지는 기본적으로 휴대 전화 화면과 동일한 너비로 자동 스케일로 스케일링됩니다 (이는 중간 -DPI가 대상 밀도의 기본값이기 때문에 다른 밀도에 해당하는 다른 스케일링 비율에 의해 결정되기 때문입니다. 따라서이 솔루션은 간단하고 거칠고 효과적입니다. 그러나 치명적인 단점이 있습니다. 고밀도 및 초 고밀도 모바일 장치의 경우 페이지 (특히 그림)가 왜곡되고 밀도가 높을수록 더 많이 왜곡됩니다.

이 솔루션에서는 Target-DensityDPI = Device-DPI를 사용하여 휴대 전화 장치가 실제 픽셀에 따라 렌더링됩니다. 전문적인 용어로는 1 CSS 픽셀 = 1 장치 픽셀입니다. 예를 들어, 640*960의 iPhone의 경우 640*960의 페이지를 만들 수 있으며 iPhone에 표시되면 스크롤 막대가 없습니다. 물론 다른 장치의 경우 크기가 다른 페이지도 필요 하므로이 솔루션은 종종 미디어 쿼리를 사용하여 반응 형 페이지를 만드는 데 사용됩니다. 이 솔루션은 특정 해상도로 완벽하게 제시 될 수 있지만, 호환 가능성이 높을수록 해상도에 따라 별도의 코드가 필요하므로 비용이 높아집니다. 간단한 예는 다음과 같습니다.

<meta name = "viewport"content = "target- densitydpi = device-dpi, width = device-width" />

#header {

배경 : URL (Medium Density-Image.png);

}

@Media 화면 및 (-webkit -device-pixel-ratio : 1.5) {

/ * 고밀도 스크린의 CSS */

#header {배경 : URL (고밀도 -Image.png);}

}

@Media 화면 및 (-webkit -device-pixel-ratio : 0.75) {

/ * 저밀도 스크린에 대한 CSS */

#header {배경 : URL (저밀도 -Image.png);}

대다수의 안드로이드 장치, 고밀도 및 중간 밀도의 특성을 위해 타협 솔루션을 채택 할 수 있습니다. 480px 너비의 디자인 드래프트를 복원하지만 페이지 시스템은 320px (배경 크기를 사용하여 그림을 줄이기 위해)로 만들어집니다. 이런 식으로 저밀도 전화에는 스크롤 막대가 있습니다 (기본적으로 아무도 이런 종류의 전화를 사용하지 않습니다), 중간 밀도 전화는 약간의 트래픽을 낭비하고, 고밀도 전화가 완벽하게 존재하며, 초고중 공간이 약간 왜곡됩니다 (매우 초고중 밀도 안드로이드 폰). 이 솔루션의 장점은 매우 분명합니다. 하나의 디자인 초안 세트와 하나의 코드 세트 만 필요합니다 (여기에는 Android 전화의 상황에 대해서만 설명합니다).