如何设置网络视图的初始缩放/宽度

StackOverflow https://stackoverflow.com/questions/3808532

题

我试图让 WebView 具有与 Android 浏览器类似的行为。浏览器以尝试使页面宽度适合屏幕的方式打开所有页面。但是，WebView 的默认行为是以 100% 像素比例开始，因此它从左上角开始放大。

在过去的几个小时里，我一直在尝试找到一种方法让 WebView 将页面缩放到屏幕，就像在浏览器中一样，但我没有任何运气。有没有人找到一种方法来实现这一目标？

我看到一个名为 setLoadWithOverviewMode 的设置，但它似乎根本没有做任何事情。我还尝试了 setInitialScale，但在不同的屏幕尺寸和网页尺寸上，它们不会像浏览器缩放那样优雅。

有人有任何线索吗？

谢谢

编辑：布莱恩的方法似乎在手机横屏时有效，但在竖屏时则无效。在纵向中，它很接近，但仍然不适合页面中的整个屏幕。我开始这个赏金是希望有一种可靠的方法来获得初始缩放以使页面适合任何方向或屏幕尺寸的页面宽度。

有帮助吗？

解决方案

下面的代码加载谷歌主页的桌面版本完全缩小到适合的854×480像素的屏幕上的Android 2.2 webview我内。当我重新调整该设备，它每次重新加载在纵向或横向，宽度适合页面完全的视图之内。

BrowserLayout.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>

Browser.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();
        }
    }
}

其他提示

我想出为什么纵向视图没有完全填充该视口。至少在我的情况，那是因为滚动条总是显示。除了上述视口代码，尝试添加这样的：

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

这导致滚动条不占用配置空间，并且允许所述网页以填充视口。

希望这有助于

这是老问题，但让我万一添加一个细节更喜欢我的人来到这里。

发表布赖恩优良的答案不是Jelly Bean中为我工作。我必须也添加：

browser.setInitialScale(30);

参数可以是塔实现的是，调整大小后的含量比网页视图宽度小的任何百分比。然后setUseWideViewPort（真）延伸的内容宽度到最大web视图的宽度。

使用尝试宽视： 

 webview.getSettings().setUseWideViewPort(true);

//对于图像和SWF影片中使用宽度为 “100％” 和高度为 “98％”

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

我和加载图像此答案工作，我希望他们可以扩展到设备的宽度。我发现，对于较老的手机用的版本低于API 19（奇巧），布赖恩的答案的行为并不像我喜欢它。它把很多围绕在旧手机的一些图像空白的，但它只是对我的新一个。这是我的选择，从这个答案的帮助：灿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>

因此，所有图像都会缩放以匹配网络视图宽度。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top