Question

我已根据设备屏幕尺寸尝试了以下内容以适应网页。

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"/>

但没有任何效果，网页不会固定在设备屏幕尺寸上。

谁能告诉我如何获得这个？

Answer 1

您可以使用此

    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);

根据屏幕尺寸修正尺寸。

Answer 2

您必须手动计算需要使用的比例，而不是设置为30。

private int getScale(){
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int width = display.getWidth(); 
    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());

Answer 3

朋友，

我发现了很多重要信息。但是，对我有用的唯一方法就是这样：

webView = (WebView) findViewById(R.id.noticiasWebView);
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
webView.loadUrl("http://www.resource.com.br/");

我正在使用Android 2.1，因为该公司提供的设备类型。但是我使用每个信息的一部分解决了我的问题。

谢谢！

Answer 4

尝试使用此HTML5提示

http://www.html5rocks.com/en/mobile/mobifying.html

如果您的Android版本为2.1或更高版本，请使用此功能

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Answer 5

这些设置对我有用：

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);

我的尝试中缺少

setInitialScale（1）。

虽然文档说如果 setUseWideViewPort 设置为 true 但 0 ， 0 将完全缩小对我不起作用，我必须设置 1 。

Answer 6

您需要做的只是

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

Answer 7

这些对我有用，并使WebView符合屏幕宽度：

// get from xml, with all size set "fill_parent"  
webView = (WebView) findViewById(R.id.webview_in_layout);  
// fit the width of screen
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

感谢上述建议和White line in eclipse Web view

Answer 8

使用此代码时遇到同样的问题

webview.setWebViewClient(new WebViewClient() {
}

您可能应该在代码中删除请记住为webview添加以下3种模式

    webview.getSettings().setJavaScriptEnabled(true);  
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setUseWideViewPort(true);

根据屏幕尺寸

修复尺寸

Answer 9

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

这对我很有用，因为.setLoadWithOverViewMode和.setUseWideViewPort将文本大小设置得非常小。

Answer 10

在这种情况下，您必须在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);

Answer 11

这似乎是一个XML问题。打开包含Web视图的XML文档。删除顶部的填充代码。

然后在布局中添加

class BoxDemo
{
    int width;
    int height;
    int length;
}


class Box {

    public static void main(String[] args) {

        BoxDemo b1 = new BoxDemo();
        BoxDemo b2 = b1;


        System.out.println("after: b2: " + b2);
        b1 = null;
        System.out.println("before: b2:  " + b2);


    }
}

在网络视图中，添加

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

这使Web-View适合设备屏幕。

Answer 12

自display.getWidth（）以来，danh32对答案进行了更改;现已弃用。

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());

Answer 13

我在html字符串中有视频，网页视图的宽度比屏幕宽度大，这对我有用。

将这些行添加到HTML字符串中。

<head>
<meta name="viewport" content="width=device-width">
</head>

将上述代码添加到HTML字符串后的结果：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width">
</head>


</html>

Answer 14

int PIC_WIDTH= webView.getRight()-webView.getLeft();

Answer 15

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，否则不会。

Answer 16

不推荐使用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);
    }
};

Answer 17

理论上结合：

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

带

settings.setUseWideViewPort(false)

修复问题，将内容包装并适合屏幕。但 NARROW_COLUMNS 已被弃用。我建议你阅读下面的这个主题，详细探讨这个问题：https://code.google.com/p/android/issues/detail?id=62378

Answer 18

这将有助于根据网页调整模拟器：

WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

您可以按百分比设置初始比例，如上所示。

Answer 19

作为参考，这是@ danh32解决方案的Kotlin实现：

private fun getWebviewScale (contentWidth : Int) : Int {
    val dm = DisplayMetrics()
    windowManager.defaultDisplay.getRealMetrics(dm)
    val pixWidth = dm.widthPixels;
    return (pixWidth.toFloat()/contentWidth.toFloat() * 100F)
             .toInt()
}

在我的情况下，宽度由三幅图像确定为300像素，因此：

webview.setInitialScale(getWebviewScale(300))

我花了几个小时才找到这篇文章。谢谢！

Answer 20

这是基于@ 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);

Answer 21

setLoadWithOverviewMode(true)-加载完全缩小的WebView
setUseWideViewPort(true)使Webview拥有普通的视口（例如普通的桌面浏览器），而如果为false，则Webview的视口将受到其自身尺寸的限制（因此，如果Webview为50px * 50px，则视口将大小相同）

了解更多here

当我不是WebView的所有者时，我遇到了这样的情况，在页面完成后我也重新调整了WebView的大小，结果导致缩放有些副作用。我的解决方案是：

webView.post(new Runnable() {
    @Override
    public void run() {
        webView.getSettings().setLoadWithOverviewMode(true);
    }
});

Answer 22

WebView webView = (WebView)findViewById(R.id.web_view);
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp)); // getActivity(). if you are at Fragment
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,here comes html content,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

Android Webview - 网页应该适合设备屏幕

22 个答案: