티스토리 뷰

기억을더듬어_내가_기억하려고_쓰는글_

 

 

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되는 효과도 덤으로 얻음.

 

 

 

잘 해결되시길 바라요.

댓글
  • 프로필사진 주니 홈페이지를 웹뷰로해서 띄우고있습니다 하지만 첫음 앱을깔았을때만 줌이되고 페이지가 전환되거나 어플을껏다키면 줌이 되지않아서그러는데 혹시 방법 있을까요?? 두번 바꿔주는식으로해도 안먹어서요.. 2019.01.23 11:56
  • 프로필사진 yenne 안녕하세요 답이 늦었습니다. 자바스크립트 코드상에는 문제 없이 잘 바꿔치기 되었나요? 2019.03.12 10:48 신고
댓글쓰기 폼