logo标签列表

安卓WebView - 网页应适应设备屏幕

androidwebviewscalingandroid-webview
131

我尝试了以下方法来根据设备屏幕大小适应网页。

mWebview.setInitialScale(30);

然后设置元数据视口。

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

但是没有任何效果，网页没有适应设备屏幕大小。

有人能告诉我如何实现吗？

22个回答
6

在这种情况下，您必须在webView中使用HTML。我使用以下代码解决了这个问题。

webView.loadDataWithBaseURL(null,
                "<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
                        + \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
                        + " alt=\"pageNo\" width=\"100%\"></body></html>",
                "text/html", "UTF-8", null);
我认为最好使用px或vh而不是%。在iframe中使用%会在方向更改时出现一些错误。 - Siarhei
5

danh32的答案需要进行修改，因为display.getWidth();现在已经被弃用。

private int getScale(){
    Point p = new Point();
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    display.getSize(p);
    int width = p.x; 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

然后使用。
WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
我计算出比例尺应该小于1或100％，因此我将我的宽度与PIC_WIDTH进行比较以获取比率。除此之外，我还减去了一些填充。 - Abhinav Saxena
5
这似乎是一个XML问题。打开包含您的Web视图的XML文档。删除顶部的填充代码。
然后在布局中添加：
android:layout_width="fill_parent"
android:layout_height="fill_parent"

在Web视图中，添加 

android:layout_width="fill_parent"
android:layout_height="fill_parent"

这将使Web-View适应设备屏幕。
只翻译文本内容：这就是节省我的时间的方式。 - Kabkee
2
fill_parent已经过时，请使用match_parent。 - Trevor Hart
3

针对任何来到这里并且在处理Webview初始缩放/比例时遇到问题的开发者（特别是在自定义网页中）。

   webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setUseWideViewPort(false); //make sure this method is false so setInitialScale() can work correctly
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.setInitialScale(110);
3
int PIC_WIDTH= webView.getRight()-webView.getLeft();
1
getRight和getLeft对我总是返回0。 - yrazlik
3
webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

这会起作用，但要记得删除类似以下的内容：

<meta name="viewport" content="user-scalable=no"/>

如果在HTML文件中存在，则设置user-scalable=yes，否则不设置。
2

Display对象的getWidth方法已被弃用。重写onSizeChanged方法可以在WebView可用时获取其大小。

WebView webView = new WebView(context) {

    @Override
    protected void onSizeChanged(int w, int h, int ow, int oh) {

        // if width is zero, this method will be called again
        if (w != 0) {

            Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);

            scale *= 100d;

            setInitialScale(scale.intValue());
        }

        super.onSizeChanged(w, h, ow, oh);
    }
};
你如何获取 WEB_PAGE_WIDTH？ - testing
如果您正在尝试缩放一些固定宽度的内容以适应屏幕，则应事先了解您的内容有多宽。这样说通吗？ - SharkAlley
好的，这应该适用于图像。但对于网页（可以是响应式的），它可以是任何宽度> 320px，例如。 - testing
2
这将有助于根据网页调整模拟器：
WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

您可以按照上述方法以百分比设置初始比例。
1

这里是一个更新的版本，不使用已弃用的方法，基于@danh32的答案：

protected int getScale(Double contentWidth) {
    if(this.getActivity() != null) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        Double val = displaymetrics.widthPixels / contentWidth * 100d;
        return val.intValue();
    } else {
        return 100;
    }
}

被同样使用：

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接