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

Posted 2023-02-18

技术标签:

【中文标题】Android Webview - 网页应适合设备屏幕【英文标题】：Android Webview - Webpage should fit the device screen 【发布时间】：2011-04-24 09:34:51 【问题描述】：

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

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

但没有任何效果，网页未固定到设备屏幕尺寸。

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

【问题讨论】：

【参考方案1】：

您必须手动计算需要使用的比例，而不是设置为 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());

【讨论】：

感谢您的回复，您说得对，它有效。但我有不同的问题。我不是在加载图片，而是在webview中加载网页，那么如何找出网页宽度（PIC_WIDTH）。啊，我错过了那里的那个常数。对于那个很抱歉。我不确定如何获得实际网页的宽度。 PIC_WIDTH 是我事先知道的常量，因为我只是显示资产文件夹中的单个图像。上面说了，不知道怎么获取实际网页的宽度。 @MaheshwarLigade 我使用 PIC_WIDTH = 360 @danh32 告诉 PIC_WIDTH 的值 ... 因为 360 对我来说不合适。【参考方案2】：

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

【讨论】：

getRight 和 getLeft 总是为我返回 0【参考方案3】：

你可以用这个

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

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

【讨论】：

这会占用屏幕，但不再允许您进行放大/缩小。这个问题可以改善吗？，我知道在ios上是可以的。这个设置对我有用，但只适用于宽度，在同样的情况下，现在它正在切断高度这是迄今为止我发现的最佳解决方案。内置解决方案的事实真的让我很着迷。要添加缩放，添加以下内容： webview.getSettings().setBuiltInZoomControls(true); webview.getSettings().setDisplayZoomControls(false);【参考方案4】：

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

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

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

【讨论】：

【参考方案5】：

试试这个 html5 技巧

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

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

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

【讨论】：

不幸的是，他们弃用了这个，这个解决方案在 Galaxy S5 上对我来说失败了【参考方案6】：

朋友们，

我从您那里找到了很多重要的信息和重要信息。但是，对我有用的唯一方法是这样：

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 你有解决办法吗？ @AnshulTyagi：不，我没有。因为这对我来说是一个测试项目，所以我没有进一步调查。如果你发现了什么，请告诉我！ @AnshulTyagi：对于网页this approach 正在为我工作。对于图像，我必须使用不同的东西...... 请将其更改为 Kotlin 的最新代码：

val displayMetrics = DisplayMetrics() windowManager.defaultDisplay.getMetrics(displayMetrics)   var width = displayMetrics.widthPixels var height = displayMetrics.heightPixels

【参考方案7】：

这些设置对我有用：

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

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

虽然文档说如果 setUseWideViewPort 设置为 true 但 0 时 0 会一直缩小对我不起作用，我必须设置 1。

【讨论】：

我没有设置初始比例，它为我工作了多年。（我只是在设置概览模式和视口）。但是我刚刚遇到的一个新设备似乎开始放大，直到页面刷新。设置初始比例为我解决了这个问题。【参考方案8】：

这些对我有用，并使 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

【讨论】：

现在 SINGLE_COLUMN 似乎已被弃用 developer.android.com/reference/android/webkit/…【参考方案9】：

在这种情况下，您必须在 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 ot vh 而不是 %。 iframe 中的 % 在方向更改方面存在一些错误【参考方案10】：

不推荐使用 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的？如果您尝试缩放一些固定宽度的内容以适应屏幕，那么您应该提前知道您的内容的宽度。这有意义吗？好的，这应该适用于图像。但是对于网页（可以是响应式的），它可以是任何宽度 > 320 像素。【参考方案11】：

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

【讨论】：

【参考方案12】：

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

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

【讨论】：

【参考方案13】：

理论上的组合：

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

与

settings.setUseWideViewPort(false)

解决了问题，包装了内容并适合屏幕。但是 NARROW_COLUMNS 已被弃用。我建议您阅读下面详细探讨该问题的帖子：https://code.google.com/p/android/issues/detail?id=62378

【讨论】：

【参考方案14】：

你需要做的只是

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

【讨论】：

它在没有 setLayoutAlgorithm 的情况下也适用于我【参考方案15】：

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

【讨论】：

我计算出比例应该 【参考方案16】：

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

webview.setWebViewClient(new WebViewClient()

您可能应该在您的代码中删除它并记得在下面为您的 webview 添加 3 种模式

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

这会根据屏幕尺寸固定尺寸

【讨论】：

@shahzainali 你可以缩放你的网页视图吗？ @AnshulTyagi 不，它不会缩放。【参考方案17】：

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

然后在布局中，添加

android:layout_
android:layout_

在 Web 视图中，添加

android:layout_
android:layout_

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

【讨论】：

这样可以节省我的时间。 fill_parent 已过时，请使用 match_parent。【参考方案18】：

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

【讨论】：

请不要因为投反对票而发布两个内容相同的答案。请花点功夫格式化你的代码！为什么要向右缩进这么多？删除一些空白的时间太长？【参考方案19】：

我有 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>

【讨论】：

【参考方案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);

【讨论】：

【参考方案21】：

作为参考，这是@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))

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

【讨论】：

【参考方案22】：

对于任何来到这里并面临处理 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);

【讨论】：

以上是关于Android Webview - 网页应适合设备屏幕的主要内容，如果未能解决你的问题，请参考以下文章

适用于所有移动设备的Webview App并上传到Play商店

android webview如何去除网页边缘白边？想其他浏览器一样？

Android webview调取安卓原生相机和相册上传图片

在 mac 上使用真正的 android 设备运行自动化测试时，是不是可以将上下文切换到 WebView？

Android——PhoneGap/WebView 忽略视口元标记？

WKWebView加载的网页自适应大小