목요일, 1월 24

webview - viewport 사용하여 다해상도에서 동일한 웹페이지 보여주기






안드로이드 기기들의 해상도 파편화는 웹뷰를 사용할 때도 똑같이 문제가 됩니다. 만약 고정된 사이즈를 갖는 콘텐츠를 웹페이지 형태로 보여주고자 하면, 해당 문제로 골치를 꽤나 썩게 됩니다.


이런 문제를 해결하기 위해서는 webkit 엔진에서 사용하는 viewport meta-tag를 사용해야 합니다. 같은 webkit 이므로 ios에서도 동일하게 적용됩니다.




webview.getSettings().setUseWideViewPort(true);
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);

Format df = new DecimalFormat("##.##");

int contentWidth = 720; //content web page width
int deviceWidth = metrics.widthPixels;
String viewport = null;
if ( contentWidth > deviceWidth ){
 String scale = "1.0";
 scale = df.format( (float)deviceWidth / (float)contentWidth );
 contentWidth = deviceWidth;
 viewport = "";
} else {

 viewport = "";
}

Log.i("TEST", viewport);
data += viewport;
wv.loadDataWithBaseURL("file:///android_asset/", data , "text/html", "UTF-8", "");

        
해당 코드는 android_asset 에 넣어놓은 html 파일을 로드해오는 코드입니다.

자세한 사항은 여기 참고하시고 -

Targeting Screens from Web Apps


왜 이런 일이 발생하는지를 간단히 요약해드리겠습니다.


안드로이드에서 default dpi 값은 160 입니다. medium-dpi 라고 말하는 이 값의 뜻은
dpi :dots per inch 약자 입니다.

인치당 얼마의 dots 가 존재하느냐? 이런 의미지요.

안드로이드의 해상도는 이 dpi 값이 160일 때를 기본형, 즉 1로 처리합니다.

그러므로 만약 해상도가 480 x 800 인 기기가 있다고 했을때, 이는 실제로 화면 픽셀이 480x800인 것이 아니고, 기기 해상상도에 dpi 값이 곱해진 값입니다.

즉, 기기의 dpi 가 240 이라고 한다면. 이는 240/160 = 1.5 가 곱해진 해상도입니다.
이에 따른 실제 기기의 해상도는  320x533 인 것 입니다.

이런 상황에서 480px 800px 의 웹페이지를 그냥 로드하려고 하면 당연히 화면이 넘쳐나게 됩니다. 때문에 viewport를 통해 실제 웹페이지를 그려놓을 곳의 size를 정해주는 것입니다.











댓글 없음:

댓글 쓰기