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个回答
327
你可以使用这个。
    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);

这会根据屏幕大小固定尺寸。

5
屏幕可以显示，但不再允许缩放。这个问题能否得到改善？我知道在IOS上是可以实现的。 - AlexAndro
2
这个设置对我来说有效，但只适用于宽度，在某些情况下现在会截断高度。 - albanx
1
这是我迄今为止找到的最佳解决方案。 - fragon
1
解决方案已经构建完成，这一事实真的让我非常满意。 - Daniel Handojo
6
要添加缩放功能，请添加以下内容：webview.getSettings().setBuiltInZoomControls(true); webview.getSettings().setDisplayZoomControls(false); - Andrew
显示剩余2条评论
93

你需要手动计算所需使用的比例尺，而不是设置为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());
7
谢谢您的回复，您说得对，它有效。但我有不同的问题。我不是在加载图片，而是在Webview中加载网页，那么如何找出网页的宽度（PIC_WIDTH）呢？ - SWDeveloper
1
啊，我错过了那个常量。对此感到抱歉。我不确定如何获取实际网页的宽度。 - danh32
4
"PIC_WIDTH"是一个常数，我事先知道它的值，因为我只是从资产文件夹中显示单个图像。正如我上面所说，我不知道如何获取实际网页的宽度。 - danh32
1
@MaheshwarLigade 我使用 PIC_WIDTH = 360。 - Nicholas Ng
1
@danh32请告诉我PIC_WIDTH的值...因为360对我来说不太合适。 - Maveňツ
显示剩余5条评论
45

这些设置对我有效：

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

setInitialScale(1) 在我的尝试中缺失了。

虽然文档说如果将 setUseWideViewPort 设置为 true，0 将会完全缩小，但是对我来说 0 并没有生效，我不得不设置为 1。

1
我之前没有设置初始比例，这个方法在过去的几年里一直有效（我只是设置了概览模式和视口）。但是最近遇到了一个新设备，在页面刷新之前似乎一直处于放大状态。设置初始比例后，问题得到了解决。 - IAmGroot
由于这些设置已在我的代码中使用，所以对我没有起作用，那么这意味着网页内容存在问题。谢谢！ - sud007
40

朋友们，

我从你们那里找到了很多重要且有用的信息。但是，对我来说唯一有效的方法是这种方式：

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。但我通过每个设备的信息部分解决了我的问题。

谢谢你！

那么缩放就不再起作用了。我是唯一遇到这个问题的人吗？ - testing
@testing 你有解决办法吗？ - Anshul Tyagi
@AnshulTyagi：没有，我没有。因为这对我来说只是一个测试项目，所以我没有进一步调查。如果你发现了什么，请告诉我！ - testing
@AnshulTyagi：对于网页，这种方法 对我来说是有效的。但对于图片，我必须使用另一种不同的方法... - testing
请将Kotlin代码更新为最新版本：val displayMetrics = DisplayMetrics() windowManager.defaultDisplay.getMetrics(displayMetrics) var width = displayMetrics.widthPixels var height = displayMetrics.heightPixels - Abhinav Saxena
getRealMetrics 在操作系统 31 中也已被弃用。请参见 https://developer.android.com/reference/android/view/Display。 - Abhinav Saxena
25
4
很不幸，这个方法已经被弃用了，而且这个解决方案在Galaxy S5上对我来说是失败的。 - 2cupsOfTech
15

你所需要做的就是简单地

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
这对我而言也没有设置setLayoutAlgorithm就能运行。 - user365314
14

这些对我有效，并将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);

非常感谢上面的建议和在Eclipse Web视图中出现的白线

5
现在看来，SINGLE_COLUMN似乎已经被废弃了。http://developer.android.com/reference/android/webkit/WebSettings.LayoutAlgorithm.html - Alexander Abramov
13

当我使用这段代码时，我遇到了同样的问题

webview.setWebViewClient(new WebViewClient() {
}

也许你应该在代码中删除它
并记得为你的webview添加以下3种模式


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

这个根据屏幕尺寸固定大小

2
@shahzainali，你可以放大你的网页视图吗？ - Anshul Tyagi
@AnshulTyagi 不，它不会缩放。 - Shahzain ali
8
我有一个包含视频的HTML字符串，Web视图的宽度大于屏幕宽度，并且这对我很有效。
请将以下行添加到HTML字符串中。
<head>
<meta name="viewport" content="width=device-width">
</head>

在将上述代码添加到HTML字符串后，结果如下：
<!DOCTYPE html>
<html>

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


</html>
7
WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

这对我来说非常好，因为文本大小已经通过 .setLoadWithOverViewMode 和 .setUseWideViewPort 设置为非常小。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接