为什么双指缩放在我的 Android WebView 中不起作用? [英] Why does pinch-to-zoom not work in my Android WebView?

问题描述

我有一个布局如下的活动:

I have an activity with a layout like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <include  layout="@layout/window_title" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true" 
        android:layout_below="@+id/linear_layout"/>

</RelativeLayout>

这是我的配置方式:

    // Enable JavaScript.
    WebView myWebView = (WebView) findViewById(R.id.webView);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    // Settings so page loads zoomed-out all the way.
    webSettings.setLoadWithOverviewMode(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setBuiltInZoomControls(true);

这是我的清单文件中的版本设置:

Here's the version setting from my manifest file:

<uses-sdk
    android:minSdkVersion="10"
    android:targetSdkVersion="17" />

我正在尝试在 WebView 中加载此页面:

I'm trying to load this page in the WebView:

https://new.livestream.com/lcboise

页面加载得很好，但我不能捏缩放.我尝试了 WebView 设置的不同组合(以上，包括其他未列出的)，但它无法缩放.

The page loads just fine, but I can't pinch to zoom. I've tried different combinations of the WebView settings (above, including others not listed) but it just won't zoom.

观察:

1) 加载我正在使用的不同页面 (https://lcboise.infellowship.com/UserLogin) 在完全相同的 WebView 中允许我缩放.

1) Loading up a different page I'm using (https://lcboise.infellowship.com/UserLogin) in the EXACT same WebView allows me to zoom.

2) 我的主要测试设备是运行 Android v4.4.3 的 HTC One，在那里不起作用.

2) My main test device, where is DOES NOT work, is a HTC One running v4.4.3 of Android.

3) 我可以在运行 Android v2.3.3 的旧测试设备上加载和缩放直播页面.

3) I can load, and zoom, the livestream page on an older test device I'm using that's running v2.3.3 of Android.

页面本身是否有可能破坏 HTC One 上运行的 WebView?如果是这样，是否有任何猜测可能会这样做?

Is it possible that something in the page itself is breaking the WebView running on the HTC One? If so, any guesses as to might be doing it?

更新[解决方案]:

以下是我必须添加到我的 WebView 才能使捏合缩放工作的内容:

Here is what I had to add to my WebView to get pinch-to-zoom to work:

    myWebView.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {
            String javascript="javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');";
            view.loadUrl(javascript);
        }
    });

推荐答案

这是您链接的页面具有以下视口元标记:

This is the page you linked has the following viewport meta tag:

<meta name="viewport" content="width=1024, maximum-scale=1.0, target-densitydpi=device-dpi">

有效的页面具有不同的视口元标记.maximum-scale 位告诉 WebView 不允许放大超过指定的数量.

The page that works has a different viewport meta tag. The maximum-scale bit is telling the WebView to not allow zooming in more than the specified amount.

该网站也应该在任何现代移动浏览器中被破坏.将最大比例设置为这样的低值不是很移动友好"；所以它可能只是网站上的一个错误.您是否尝试联系所有者，也许他们可以在服务器端修复它?

The site should also be broken in any modern mobile browser. Setting maximum-scale to a low value like that is not very "mobile friendly" so it might just be a bug on the site. Have you tried contacting the owner, maybe they can fix it server-side?

您在 WebView 中可以做的很多事情都不会导致其他站点呈现错误.您可以尝试通过 更改元标记 作为最后的手段.

There is not a whole lot you can do in the WebView that will not result in other sites rendering incorrectly. You could try injecting JavaScript to fix up the page by changing the meta tag as a last resort.

这篇关于为什么双指缩放在我的 Android WebView 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！