WebView 中的比例不正确

Question

我有一个基于 PrimeFaces 的网站。我的问题是 WebView 上的内容和图像看起来比 Chrome 上的大。我应该怎么做才能使 WebView 上的渲染与 Chrome 上的渲染相同？

缩放似乎没有帮助，因为该网站具有响应式设计。我也尝试过wrap_content 而不是fill_parent，但没有成功。

更新 1： 以下内容无效。我已将它们从下面的代码中排除以保持最小化。

• WebViewClient
• ChromeViewClient
• setLoadWithOverviewMode(true)
• setUseWideViewPort(true)

更新 2： setInitialScale() 无效。

MyActivity.java

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    webView = (WebView) findViewById(R.id.web_engine);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    if (savedInstanceState == null) {
        webView.loadUrl("http://www.primefaces.org/showcase/mobile/index.xhtml");
    }
}

ma​​in.xml

<RelativeLayout xmlns:a="http://schemas.android.com/apk/res/android"
            a:layout_width="fill_parent"
            a:layout_height="fill_parent"
            a:background="#ffffff"
            a:orientation="vertical" >

<WebView a:id="@+id/web_engine"
         a:layout_width="fill_parent"
         a:layout_height="fill_parent"
/>

Answer 1

试试：

webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
webView.getSettings().setSupportZoom(true);

此处提及：http://developer.android.com/guide/webapps/migrating.html

更具体地说：http://developer.android.com/reference/android/webkit/WebSettings.LayoutAlgorithm.html#TEXT_AUTOSIZING

完整代码在这里：

mWebView = (WebView) mLayoutMain.findViewById(R.id.webview_main);
mWebView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return false;
    }
});
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
mWebView.getSettings().setSupportZoom(true);
mWebView.loadUrl("http://www.primefaces.org/showcase/mobile/index.xhtml");

Answer 2

我有一个类似的问题，问题是系统字体大小（设置 -> 显示 -> 字体大小）影响了 WebView 中的字体大小，但不影响浏览器中的字体大小。

当我使用cordova时，我用cordova plugin解决了这个问题，见this answer

查看插件代码，它在 Android 中执行以下操作来重置字体大小：

mWebView.getSettings().setTextZoom(100);

或（ICS 之前）：

mWebView.getSettings().setTextSize(WebSettings.TextSize.NORMAL);

Answer 3

首先，我建议您在不同的移动浏览器上测试您的应用。如果同样的问题，请参见下文：

浏览器和您的应用程序之间的差异可能是因为您在将 setUseWideViewPort WebSetting 设置为 true 时犯了错误。

查看以下链接：

1. why does my font-size look so much larger in the android webview object than when viewed in the android browser?

2. Android WebView text zoom for different screens and os version

3. WebView text size

Answer 4

我在移动 chrome 和应用程序中都尝试了http://www.primefaces.org/showcase/mobile/index.xhtml，它们看起来都相似

应用内

在 Chrome 中

我没有发现任何问题。您是否有可能在某些特定的 android 版本中有所不同？我在 4.4.4 验证过

Answer 5

要使字体大小与 chrome 或网站匹配而无需调整大小，只需执行 webSettings.setMinimumFontSize(1);

亲切的问候 拉敏