devflow.kr@:~#

Android WebView 텍스트(Input) 입력시 확대/리사이징 문제

ANDROID

WebView에서 ViewPort Metatag를 가지고 있어도. Form이나 기타 TextField(input)을 입력할때 확대가 되는 버그가 발생하는데.


이때 viewport meta tag의 값을 아래와 같이 설정해 주면 TextField가 Focus되도 확대가 되지 않아 정상적으로(Y스크롤만 진행)됩니다.


width=device-width, initial-scale=1.0, user-scalable=no, height=device-height, maximum-scale=1.0, target-densityDpi=device-dpi


참고로 필자는 아래와 같은 WebView 세팅을 설정하였습니다.


        set.setJavaScriptEnabled(true);
        set.setJavaScriptCanOpenWindowsAutomatically(true);
        set.setBuiltInZoomControls(false);
        set.setSupportMultipleWindows(false);
        set.setSupportZoom(false);
        set.setBlockNetworkImage(false);
        set.setLoadsImagesAutomatically(true);
        set.setAllowContentAccess(true);
        set.setUseWideViewPort(false);
        set.setLoadWithOverviewMode(false);
        set.setDomStorageEnabled(true);
        set.setAppCacheEnabled(true);


위에서 굳이 필요한거만 꼽자면, setLoadWithOverviewMode, setUseWideViewPort,setSupportZoom,setBuiltInZoomControls 정도가 되겠습니다.


해당 이슈가 발생하는 이유는 WebView에서 TextField가 포커스를 잡히게되면 Soft Keyboard가 활성화되어 WebView가 Resize되기 때문입니다. 하나의 다른 해결방법으로 Manifest에 android:windowSoftInputMode="adjustPan"를 설정하면 되는데, 필자의 경우에는 Fixed 레이아웃안에 TextField가 포함되어있기 때문에, WebView가 리사이징되지 않으면 Soft Keyboard가 WebView를 가려 더욱 큰 문제가 발생하기 때문에 위와같은 Meta tag를 수정하는 방법을 사용하였습니다.



티스토리 툴바