viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법

앞으로 공개될 Mobile Firefox (Fennec) 1.1 에는 개선된 <meta name="viewport"> 태그를 지원한다. 이전 버전의 Fennec에서 viewport 속성(property)으로 width, height, 그리고 initial-scale 가 지원되긴 했지만 iphone과 android 브라우저에 맞추어 디자인된 몇몇 사이트에서 문제가 있었다. 이제 모바일 safari 에서도 같은 속성들이 지원되며, Fennec을 고쳐서 여러가지 화면크기와 다른 해상도에서도 모바일 사이트들이 문제없이 나타나도록 했다.

이전 touch.facebook.com:

개선후 touch.facebook.com:

이러한 개선점들은 최신의 Fennec 1.1 와 Maemo, Windows, Mac, or Linux를 위한 trunk nightly 빌드에서 볼 수 있다.

배경설명

Fenec과 같은 모바일 브라우저들은 뷰포트(viewport)로 알려진 가상 "window"상에 페이지를 렌더링하는데, 보통의 경우 스크린 보다 폭이 넓어 모든 페이지 레이아웃을 억지로 작은 화면에 축소할 필요가 없다. (레이아웃을 축소할 경우 모바일 사이트로 만들지 않은 사이트들은 대개 엉망이 되게 마련이다.) 사용자들은 화면을 움직이거나 줌 기능을 이용해 페이지의 보이지 않는 부분들을 볼 수 있다.

모바일 Safari는 "viewport meta" 태그를 도입해서 웹 개발자들이 뷰포트의 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 많은 다른 모바일 브라우저들도 이 태그를 이제 지원한다. 애플의 문서를 통해 이 태그의 사용법을 자세히 알 수 있기는 하지만 Fenec내에서 정확히 어떻게 구현해야 할 것인가에 대해 상당한 연구가 진행되어야 했다. 예를 들어 사파리의 문서에는 페이지 컨텐트를 "comma-delimited list"라고 쓰고 있는데, 현존하는 브라우저와 웹페이지는 comma, semicolon, 그리고 space의 다양한 조합을 사용한다.

다양한 브라우저내의 뷰포트에 대해 더 배우고 싶으면 quirksmode.org에 있는 A Tale of Two Viewports 보라.

뷰포트 기본

모바일로 최적화된 사이트는 일반적으로 다음과 같은 태그를 포함한다:

<meta name="viewport" content="width=device-width, user-scalable=no">

width 속성은 뷰포트의 크기를 조정한다. 특정한 숫자를 사용해 width=600라고 할 수도 있고 device-width와 같은 특정한 값을 사용할 수도 있는데, device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다. (뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 상응하는 height와 device-height 값들이 유용하게 사용될 수 있다.)

initial-scale 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다. maximum-scale, minimum-scale, 그리고 user-scalable 속성들은 사용자가 얼마나 페이지를 줌-인, 줌-아우트 할 수 있는지를 조정한다.

픽셀은 사실 픽셀이 아니다

iPhone과 인기가 많은 다양한 안드로이드 폰은 3에서 4인치 (7-10센티미터) 스크린으로 320-480픽셀 (~160 dpi)로 이루어져 있다. 동일한 물리적 스크린을 갖는 Nokia N900에서 구동되는 Maemo의 파이어폭스는 480-800픽셀(~240dpi)이다. 이러한 이유로 Fennec의 최신 버전에서 보여지는 웹페이지들은 아이폰이나 안드로이드에 비해 1/3정도 작기 떄문이다(실제 물리적으로). 이는 터치인터페이스에 최적화된 웹사이트에서 사용성과 가독성의 문제를 야기시킨다. Peter-Paul Koch가 이 문제에 대해 픽셀은 사실 픽셀이 아니다를 작성하였다.

Maemo 의 Fennec 1.1는 안드로이드의 웹킷기반 브라우저에 의해 각 CSS의 "픽셀"을 1.5 하드웨어 픽셀로 사용한다. 이는 initial-scale=1 로 정의된 페이지를 Maemo의 Fennec과 아이폰의 사파리, 그리고 HDPI 와 MDPI 모두의 안드로이드 브라우저에서 거의 동일한 물리적 사이즈로 렌더링한다는 뜻이다. 이는 CSS 2.1 명세서에 의해 아래와 같이 정의되어있다:

만약 출력장치의 픽셀밀도가 일반적인 컴퓨터 디스플레이와 상이하게 다를경우, user agent는 반드시 픽셀값을 조절해야 한다. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. 

웹 개발자들에게 이는 세로모드에서 scale=1로 지정됐을 경우, 위에서 언급된 장치들상에서  320px이 가로로 최대가 되어야 하며,  역시 레이아웃과 이미지들도 마찬가지로 조절이 되어야 함을 의미한다. 하지만 모든 모바일 장치들이 같은 가로 값을 가지지 않는다는 점을 기억해야한다. 작성된 페이지는 가로모드뿐만 아니라, 아이패드와 안드로이드 타블렛과 같은 더 큰 장치들에서도 잘 동작되어야 한다.

240-dpi 화면상에서, initial-scale=1로 정의된 페이지는 Fennec과 안드로이드 웹킷에서 150%로 확대된다. 페이지의 텍스트들은 부드럽고 또렷해질것이나, 아마도 비트맵 이미지들은 최대 해상도에서 이점을 가지지 못한다. 이러한 스크린에서 또렷한 이미지를 보여주기 위해서는, 이미지나 전체적인 레이아웃을 최종 디자인의 150%(아이폰의 레티나 디스플레이와 같은 320-dpi장치들을 지원하기 위해서는 200%이다)로 작성하고, CSS나 viewport속성을 이용해 사이즈를 줄여 보여줄수도 있다.

기본 비율은 디스플레이의 밀도에 따라 달라진다. 200dpi이하의 밀도를 갖는 디스플레이에서는 1.0이다. 200에서 300dpi사이의 장치에서는, 1.5가 된다. 300dpi이상의 장치에서는 소수점 없는 정수가 된다.(밀도/150dpi). 기본 비율은 viewport 크기가 1일때만 참이 됨을 기억하라. 그렇지 않을 경우 CSS픽셀과 장치의 픽셀간 관계는 현재의 zoom 레벨에 따라 달라진다.

Viewport width 와 screen width

Many sites set their viewport to "width=320, initial-scale=1" to fit precisely onto the iPhone display in portrait mode. As mentioned above, this caused problems when Fennec 1.0 rendered these sites, especially in landscape mode. To fix this, Fennec 1.1 will expand the viewport width if necessary to fill the screen at the requested scale. This matches the behavior of Android and Mobile Safari, and is especially useful on large-screen devices like the iPad. (Allen Pike's Choosing a viewport for iPad sites has a good explanation for web developers.)

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

<meta name="viewport" content="width=500, initial-scale=1">

Fennec 1.1 also adds support for minimum-scale, maximum-scale, and user-scalable, with defaults and limits similar to Safari's. These properties affect the initial scale and width, as well as limiting changes in zoom level.

Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like device-width, based on its new window dimensions.

모바일과 태블릿에 대한 일반 viewport 크기

If you are wanting to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of 모바일 및 태블릿 뷰포트 크기. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

표준

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to make sure we can implement any changes made during standardization.