如何设置 webview 的初始缩放/宽度

我正在尝试让 WebView 具有与 android 浏览器相似的行为。浏览器打开所有页面的方式是试图使其宽度适合屏幕。然而，WebView 的默认行为是从100% 像素级开始，因此它开始在左上角放大。

在过去的几个小时里，我一直在想办法让 WebView 像在浏览器中那样将页面缩放到屏幕上，但我没有任何进展。有人找到办法了吗？

I see is a setting called setLoadWithOverviewMode, but that didn't appear to do anything at all. I also experimented with setInitialScale but on different screen sizes and web page sizes that won't be as graceful as the browsers scaling.

有线索吗？

谢谢

编辑: 布莱恩的方法似乎工作时，手机在风景，但不在肖像。在肖像它是接近，但仍然不适合整个屏幕在页面。我开始这个慷慨的希望有一个肯定火的方式来获得初始缩放，以适应任何方向或屏幕大小的页面宽度的页面。

115091 次浏览
小开

试试 using a wide viewport:

 webview.getSettings().setUseWideViewPort(true);
小开
最佳答案

下面的代码加载了 Google 主页的桌面版本，在854x480像素的 Android 2.2屏幕上完全缩小到适合我的 webview。当我重新调整设备的方向，它重新加载纵向或横向，页面宽度完全适合在视图中的每一次。

Xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">


<WebView android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>

浏览器.java:

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;


public class Browser extends Activity {


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.BrowserLayout);


String loadUrl = "http://www.google.com/webhp?hl=en&output=html";


// initialize the browser object
WebView browser = (WebView) findViewById(R.id.webview);


browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);


try {
// load the url
browser.loadUrl(loadUrl);
} catch (Exception e) {
e.printStackTrace();
}
}
}
小开

//for images and swf videos use width as "100%" and height as "98%"

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
小开

我知道为什么肖像画没有完全填满视角了。至少在我的情况下，这是因为滚动条总是显示。除了上面的视图代码之外，尝试添加以下代码:

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
browser.setScrollbarFadingEnabled(false);

这导致滚动条不占用布局空间，并允许网页填充视窗。

希望这个能帮上忙

小开

这是一个老问题，但让我补充一个细节，以防更多像我这样的人来到这里。

布莱恩发布的绝妙答案对我来说不适用，我还要补充一点:

browser.setInitialScale(30);

这个参数可以是调整后的内容大小小于 webview 宽度的任意百分比。然后 setUseWideViewPort (true)将内容宽度扩展到 webview 宽度的最大值。

小开

我正在加载这个答案的图像，我希望他们被缩放到设备的宽度。我发现，对于那些版本低于 API 19(KitKat)的老款手机来说，布莱恩的回答并不像我喜欢的那样。它在旧手机上的一些图像周围放置了大量的空白，但是在我的新手机上却可以工作。这里是我的替代方案，从这个答案的帮助: Android 的 WebView 能自动调整大图像的大小吗？布局算法 SINGLE_COLUMN是不推荐的，但它的工作，我觉得它是适合与旧的网页视图。

WebSettings settings = webView.getSettings();


// Image set to width of device. (Must be done differently for API < 19 (kitkat))
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN))
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
} else {
if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true);
if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true);
}
小开

如果你已经解决了网页视图，但是你的图片仍然超出了比例，我发现最好的解决方案(给你)就是简单地在文档前面加上:

<style>img{display: inline; height: auto; max-width: 100%;}</style>

因此，所有的图像都按比例缩放以匹配网页视图宽度。

小开

在 科特林中，你可以使用,

webView.isScrollbarFadingEnabled = true
webView.setInitialScale(100)
小开

使用 Mozilla 的 GeckoView库可以轻松实现这一点。你可以用它来代替 WebView。但是这种方法的最大缺点是这个库大约50MB。


提交答案