-
[Android] WebView zoom in/out을 위한 viewport meta tag 변경Android 2018. 1. 30. 12:57
기억을더듬어_내가_기억하려고_쓰는글_
Android WebView에서 소스를 받아왔는데, 두 손가락으로 zoom-in/out이 안되게 막혀있는 경우가 있다.
웹뷰에 로드된 html 소스를 까보면 <head>안에 요런 식으로 설정이 되어 있음.
user-scalable=no 이놈이 문제인데,
<meta name="viewport" content="width=device-width, user-scalable=no">하지만 user-scalable=yes로 갈아치운다고 100% 해결이 되지 않았기에, 이 포스팅을 작성하게 됨....
일단 Android Native단에서는 해줄 수 있는 방법들이 여러가지가 있는데
1. 아래 설정들을 webView 객체에 추가하면 보통 해결.
webView.getSettings().setLoadWithOverviewMode(true); webView.getSettings().setUseWideViewPort(true); webView.getSettings().setBuiltInZoomControls(true); webView.getSettings().setSupportZoom(true); webView.getSettings().setDisplayZoomControls(false);2. 그래도 안되면 webview 로딩 완료 시점에 자바스크립트 inject로 meta tag를 강제로 갈아치우면 해결.
StringBuilder script = new StringBuilder(); script.append("javascript:(function(){"); script.append("넣을 javascript 내용"); script.append("})();"); webView.loadUrl(script.toString());javascript 변경하는 내용은 아래와 같이 두가지가 있는데
2-1. viewport meta tag를 remove해서 완전 삭제 후 새로 생성하는 방법
2-2. viewport meta tag의 attr을 변경하는 방법
2-1 은 타이밍의 문제가 있다고 해서 비추천.2-2 방법을 써 보았더니, 보통 된다...... 보통 되는데,
내 앱은 10번에 한 번 꼴로 앱 처음 실행 시 첫 페이지 줌 인/아웃이 안됨!!!
Chrome Dev Tool을 켜서 보면 viewport meta tag는 yes로 잘 바뀌어 있다.
근데 왜? 항상도 아니고 가끔. 왜? ㅠㅠ 아마 이것도 뭔가 타이밍의 문제이지 않았을까 싶다.
이럴 땐. meta tag를 연속으로 두번 갈아치우면 해결...!!!
그러니까 2번의 javascript 내용을 이렇게 해주면 된다.
document.querySelector(\"meta[name=viewport]\").setAttribute('content', 'width=device-width, initial-scale=0, maximun-scale=2.0, user-scalable=yes'); document.querySelector(\"meta[name=viewport]\").setAttribute('content', 'width=device-width, initial-scale=1.0, maximun-scale=2.0, user-scalable=yes');처음 부를땐 initial-scale=0을 이용해
zoom-in되어 있는 페이지에서 다른 페이지로 이동할 때 zoom-out되는 효과도 덤으로 얻음.
잘 해결되시길 바라요.
'Android' 카테고리의 다른 글
Fabric 적용법 (0) 2018.03.06 MacOS Android Studio 단축키 (0) 2018.03.06 Apple Mach-O Linker Error (0) 2018.02.09 [Android] FCM Push type (data/notification) (0) 2018.01.30 [Android] VolleyRequest FileUpload시 library 변경 (0) 2018.01.30