단비의 대나무밭

요즘 간간히 앱을 만들고 있었다.

그런데 요구사항 중 하나가, 특정 사이트에서 핀치 줌/아웃이 되게 해달란다. 그 사이트는 메타태그로 핀치 줌인을 막아놓고 있는 것이었다.

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

문제는, 이런 비슷한 해결방법들이 Android Studio에는 많치만 상대적으로 사용자가 적은 델파이(RAD Studio)에는 잘 알려지지 않았다는 거다.

그래서 답은 안드로이드 스튜디오 용으로 일단 찾아놓고.. https://yenne.tistory.com/4 이분이 답을 알려주셨다.

어차피 델파이도 언어가 델파이(오브젝트 파스칼)이라서 그렇지 SDK는 Android Studio를 쓰니 방법은 같을 것이라는 생각에 똑같이 해봤다.

거기 나온 방법대로 WebView 초기값을 주기위해 FMX.WebBrowser.Android.pas 파일을 프로젝트 디렉토리에 복사해 놓고 수정해보기도 하고.... 그런데 별로 소용이 없었다.

처음에는 D.P.F 패키지를 깔아서 해결하려 했는데, 설치도 어렵고... 버전업도 안되고 했는데 기본 컴포넌트로 해결하는 방법이 있었다.

TWebbrowser 컴포넌트 자체에 자바스크립트를 실행시키는 프로시저가 존재했다. 그것은 EvaluateJavascript 라는 프로시저인데, 프로시저 이름에서 풍기는 포~쓰! 그렇다. 아주 쉽게 자바스크립트 실행이 가능했다. 이걸 몰라서 D.P.F 패키지를 깔기 위해 그 뻘짓을 했으니... 

방법은 간단하다.

웹뷰가 문서를 다 로드한 시점에 실행되는 DidFinishLoad 이벤트에 다음 코드를 넣어주면 된다.

그런데 한번 넣어서는 안되고, initial-scale=0 으로 한번 initial-scale=1.0 으로 한번 도합 두번을 넣어주어야 한다.

procedure TfrmMain.WebBrowser1DidFinishLoad(ASender: TObject);
begin
  WebBrowser1.EvaluateJavaScript('document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width, initial-scale=0, maximun-scale=2.0, user-scalable=yes");');
  WebBrowser1.EvaluateJavaScript('document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width, initial-scale=1.0, maximun-scale=2.0, user-scalable=yes");');
end;