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

SWD*_*per 98 scaling android webview android-webview

我已尝试以下内容根据设备屏幕大小调整网页.

mWebview.setInitialScale(30);
Run Code Online (Sandbox Code Playgroud)

然后设置元数据视口

<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"/>
Run Code Online (Sandbox Code Playgroud)

但没有任何作用,网页没有固定到设备屏幕大小.

谁能告诉我怎么弄这个?

Tus*_*kar 280

你可以用它

    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);
Run Code Online (Sandbox Code Playgroud)

这可以根据屏幕大小修复大小.

  • 这会占据屏幕,但不允许您进行放大/缩小.这个问题可以改进吗?我知道在IOS上这是可能的. (4认同)
  • 要添加缩放,请添加以下内容:webview.getSettings().setBuiltInZoomControls(true); .webview.getSettings()setDisplayZoomControls(假); (3认同)
  • 这个设置对我有用,但仅适用于宽度,在同样的情况下,现在它正在切断高度 (2认同)

dan*_*h32 80

您必须计算手动使用的比例,而不是设置为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();
}
Run Code Online (Sandbox Code Playgroud)

然后用

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
Run Code Online (Sandbox Code Playgroud)

  • 什么是PIC_WIDTH? (50认同)
  • 谢谢你的回复,你说得对,它有效.但我有不同的问题.我没有加载图片,在webview中加载网页,所以如何找出网页宽度(PIC_WIDTH). (7认同)
  • PIC_WIDTH是我事先知道的常量,因为我只是在assets文件夹中显示一个图像.正如我上面所说,我不知道如何获得实际网页的宽度. (3认同)
  • 只有这个解决方案在Android 4.4上运行良好 (2认同)

小智 31

朋友们,

我发现了很多重要信息.但是,唯一适用于我的方式就是这样:

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/");
Run Code Online (Sandbox Code Playgroud)

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

谢谢!


Doc*_*Doc 28

这些设置对我有用:

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);
Run Code Online (Sandbox Code Playgroud)

我的尝试中缺少setInitialScale(1).

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


小智 25

试试这个HTML5提示

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

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

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
Run Code Online (Sandbox Code Playgroud)

  • 不幸的是他们不赞成这个,这个解决方案在Galaxy S5上失败了 (2认同)

Muh*_*Ali 15

你需要做的就是简单

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
Run Code Online (Sandbox Code Playgroud)


Nez*_*ika 13

这些对我有用,并使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);  
Run Code Online (Sandbox Code Playgroud)

感谢eclipse Web视图中的上述建议和白线

  • 似乎现在不推荐使用SINGLE_COLUMN http://developer.android.com/reference/android/webkit/WebSettings.LayoutAlgorithm.html (3认同)

小智 11

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

webview.setWebViewClient(new WebViewClient() {
}
Run Code Online (Sandbox Code Playgroud)

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

    webview.getSettings().setJavaScriptEnabled(true);  
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setUseWideViewPort(true);
Run Code Online (Sandbox Code Playgroud)

这可以根据屏幕大小修复大小

  • @shahzainali你可以缩放你的webview吗? (2认同)

小智 8

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

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

<head>
<meta name="viewport" content="width=device-width">
</head>
Run Code Online (Sandbox Code Playgroud)

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

<!DOCTYPE html>
<html>

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


</html>
Run Code Online (Sandbox Code Playgroud)


小智 6

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);
Run Code Online (Sandbox Code Playgroud)

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


Qad*_*ain 5

在这种情况下,您必须在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);
Run Code Online (Sandbox Code Playgroud)


Duc*_*les 5

自 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();
}
Run Code Online (Sandbox Code Playgroud)

然后使用

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());
Run Code Online (Sandbox Code Playgroud)


小智 5

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

然后在布局中添加

android:layout_width="fill_parent"
android:layout_height="fill_parent"
Run Code Online (Sandbox Code Playgroud)

在 Web 视图中,添加

android:layout_width="fill_parent"
android:layout_height="fill_parent" 
Run Code Online (Sandbox Code Playgroud)

这使得 Web 视图适合设备屏幕。

  • fill_parent 已经过时,请使用 match_parent。 (2认同)