모바일웹 - 앱내 webview를 이용하여 확대/축소 하기

개발/안드로이드 2017. 8. 2. 16:52
반응형

프로젝트에 Webview를 이용하여 컨텐츠를 보여주고 있는데 화면 축소/확대가 안되는 이슈가 있었는데 해결하였습니다.!

도움이 될까하여 작성해 보았습니다.



안드로이드 앱내 WebView에서 확대/축소를 하려면 webview 객체에 WebSettings 설정을 해주시면 됩니다.

WebSettings 설정은 아래와 같이 하시면 됩니다.

WebSettings wsetting = m_webView.getSettings();

wsetting.setBuiltInZoomControls(true);
wsetting.setSupportZoom(true);

확대가 되십니까? 안되신다구요!?

그럼 웹페이지에 "viewport"가 고정되어 있어서 그렇습니다.

요즘 모바일웹페이지에서는 확대/축소 안되도록 "viewport"를 설정해 놓는 경우가 많습니다.

"viewport" 설정에 scale을 조정할 수 있는데 모두 1.0x 로 설정하면 확대/축소가 안되게 되어있습니다. 


html 코드내 <head>안의 <meta> 태그 중에 설정되어 있는 "viewport" 옵션을 변경하시면 됩니다.


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes,target-densitydpi=medium-dpi"> 

위 코드는 1.0~2.0 까지 줌이 되도록 설정한 코드 입니다. 


참고로 아이폰의 경우는 "viewport" 만 변경 해주면 앱내 Webview에서 확대/축소 기능이 되지만, 

안드로이드는 Webview WebSettings 설정과 "viewport" 설정을 해줘야 정상적으로 확대/축소 기능이 동작하게 됩니다.



반응형
admin