웹뷰의 초기 확대 / 축소 / 너비를 설정하는 방법

웹뷰의 초기 확대 / 축소 / 너비를 설정하는 방법

---

WebView가 Android 브라우저와 유사한 동작을 갖도록 노력하고 있습니다. 브라우저는 너비를 화면에 맞추는 방식으로 모든 페이지를 엽니 다. 그러나 WebView의 기본 동작은 100 % 픽셀 스케일에서 시작하여 왼쪽 상단 모서리에서 확대를 시작하는 것입니다.

지난 몇 시간 동안 WebView가 브라우저에서와 같이 페이지를 화면에 맞게 조정하는 방법을 찾으려고 노력했지만 운이 없습니다. 누구든지 이것을 달성하는 방법을 찾았습니까?

setLoadWithOverviewMode라는 설정이 있지만 전혀 작동하지 않는 것 같습니다. 또한 setInitialScale로 실험했지만 브라우저 크기 조정만큼 우아하지 않은 다양한 화면 크기와 웹 페이지 크기에서 실험했습니다.

아무도 단서가 있습니까?

감사

편집 : Brian의 방법은 전화가 가로로 있지만 세로가 아닌 경우 작동하는 것 같습니다. 세로에서는 가깝지만 여전히 페이지의 전체 화면에 맞지 않습니다. 이 현상금은 모든 방향이나 화면 크기에서 페이지 너비에 맞게 페이지를 초기 확대 / 축소 할 수있는 확실한 방법이 있기를 바라면서 시작합니다.

---

다음 코드 webview는 854x480 픽셀 화면에서 Android 2.2에서 나에 맞게 완전히 축소 된 Google 홈페이지의 데스크톱 버전을로드합니다 . 기기의 방향을 바꾸고 세로 또는 가로로 다시로드하면 페이지 너비가 매번보기에 완전히 맞습니다.

BrowserLayout.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

     <WebView android:id="@+id/webview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" />
</LinearLayout>

Browser.java :

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class Browser extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.BrowserLayout);

        String loadUrl = "http://www.google.com/webhp?hl=en&output=html";

        // initialize the browser object
        WebView browser = (WebView) findViewById(R.id.webview);

        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);

        try {
            // load the url
            browser.loadUrl(loadUrl);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

---

세로 뷰가 뷰포트를 완전히 채우지 않는 이유를 알아 냈습니다. 적어도 제 경우에는 스크롤바가 항상 표시 되었기 때문입니다. 위의 뷰포트 코드 외에도 다음을 추가해보세요.

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    browser.setScrollbarFadingEnabled(false);

This causes the scrollbar to not take up layout space, and allows the webpage to fill the viewport.

Hope this helps

---

It is and old question but let me add a detail just in case more people like me arrive here.

The excellent answer posted by Brian is not working for me in Jelly Bean. I have to add also:

browser.setInitialScale(30);

The parameter can be any percentage tha accomplishes that the resized content is smaller than the webview width. Then setUseWideViewPort(true) extends the content width to the maximum of the webview width.

---

Try using a wide viewport:

 webview.getSettings().setUseWideViewPort(true);

---

//for images and swf videos use width as "100%" and height as "98%"

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);

---

I'm working with loading images for this answer and I want them to be scaled to the device's width. I find that, for older phones with versions less than API 19 (KitKat), the behavior for Brian's answer isn't quite as I like it. It puts a lot of whitespace around some images on older phones, but works on my newer one. Here is my alternative, with help from this answer: Can Android's WebView automatically resize huge images? The layout algorithm SINGLE_COLUMN is deprecated, but it works and I feel like it is appropriate for working with older webviews.

WebSettings settings = webView.getSettings();

// Image set to width of device. (Must be done differently for API < 19 (kitkat))
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
    if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN))
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
} else {
    if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true);
    if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true);
}

---

If you have the web view figured out but your images are still out of scale, the best solution I found (here) was simply prepending the document with:

<style>img{display: inline; height: auto; max-width: 100%;}</style>

As a result all images are scaled to match the web view width.

참고URL : https://stackoverflow.com/questions/3808532/how-to-set-the-initial-zoom-width-for-a-webview