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


103

我已尝试根据设备屏幕尺寸选择以下内容以适合该网页。

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

但是没有任何效果,网页并不固定于设备屏幕尺寸。

谁能告诉我如何得到这个?

Answers:


82

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

1
啊,我想念那里的常数。对于那个很抱歉。我不确定如何获取实际网页的宽度。
danh32

54
什么是PIC_WIDTH?
Paresh Mayani

4
PIC_WIDTH是我事先知道的一个常数,因为我只是显示资产文件夹中的单个图像。如上所述,我不知道如何获取实际网页的宽度。
danh32'2

1
@MaheshwarLigade我使用PIC_WIDTH = 360
Nicholas Ng

292

你可以用这个

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

这会根据屏幕尺寸确定尺寸。


4
这使屏幕固定,但不允许您再进行放大/缩小。我能知道在IOS上有可能改善此问题吗?
AlexAndro 2012年

1
此设置对我
有用

1
到目前为止,这是实现此目标的最佳解决方案。
fragon 2015年

1
该解决方案内置的事实使我感动。
丹尼尔·汉托霍

3
要添加缩放,请添加以下内容:webview.getSettings()。setBuiltInZoomControls(true); webview.getSettings()。setDisplayZoomControls(false);
安德鲁(Andrew)

34

朋友们

我从您那里获得了很多重要信息。但是,对我而言唯一可行的方法是:

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有解决方案吗?
Anshul Tyagi

@AnshulTyagi:不,我没有。因为对我来说这是一个测试项目,所以我没有对此做进一步调查。让我知道您是否找到了东西!
测试了

@AnshulTyagi:对于网页,此方法对我有效。对于图像,我必须使用其他方式...
测试

31

这些设置对我有用:

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

我的尝试中缺少setInitialScale(1)

尽管文档说如果将setUseWideViewPort设置为true,则0会一直缩小,但是0对我不起作用,我必须设置1


1
我没有设置初始刻度,它为我工作了很多年。(我只是设置概览模式和视口)。但是Ive刚遇到的新设备似乎开始放大,直到页面刷新为止。设置初始刻度对我来说很固定。
Doomsknight


15

您需要做的就是

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

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

感谢上面的建议和Eclipse Web视图中的白线



11

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

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

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

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


6

我的视频使用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>

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

我猜最好用px ot vh而不是%。iframe中的%在方向更改上有一些错误
Siarhei

4

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

我计算出比例应该小于1或100%,因此我将宽度与PIC_WIDTH进行了比较以获得比率。不仅如此,我还扣除了一些填充。
Abhinav Saxena

4

这似乎是一个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视图适合设备屏幕。


那就是节省我的时间的原因。
Kabkee

2
fill_parent已过时,请使用match_parent。
Trevor Hart

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

这将有助于根据网页调整仿真器:

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

您可以按照上面的百分比设置初始刻度。


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
测试

如果要缩放某些固定宽度的内容以适合屏幕,则应事先知道内容的宽度。那有意义吗?
SharkAlley's

确定,这应该适用于图像。但是对于网页(可以响应),它可以是任何宽度> 320px的宽度。
测试时间


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

0

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

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


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

请不要仅仅因为投反对票而发表两个内容相同的答案。
techydesigner

并请格式化您的代码,花点力气!您为什么这么向右缩进呢?删除空白空间过多?
Massimiliano Kraus
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.