设置 WebView,禁止缩放网页

在 Android 14 中,你可以通过以下步骤来设置 WebView,禁止缩放网页:

1. 在 WebView 加载网页之前,获取 WebSettings 对象:

WebSettings webSettings = webView.getSettings();

1. 使用 WebSettings 对象禁用缩放:

webSettings.setSupportZoom(false);webSettings.setBuiltInZoomControls(false);webSettings.setDisplayZoomControls(false);

• setSupportZoom(false) 禁止 WebView 支持缩放功能。
• setBuiltInZoomControls(false) 禁用内置的缩放控件。
• setDisplayZoomControls(false) 不显示缩放控件。
  1. 此外,你还可以设置 WebView 的 setUseWideViewPort 和 setLoadWithOverviewMode 属性,以确保网页适应设备屏幕,不允许用户缩放:

  webSettings.setUseWideViewPort(true);webSettings.setLoadWithOverviewMode(true);

  • setUseWideViewPort(true) 设置 WebView 使用广泛的视口,使网页内容适应屏幕宽度。
  • setLoadWithOverviewMode(true) 设置 WebView 加载的页面以总览模式显示,即按屏幕大小缩放内容。

    完整示例代码:

    WebView webView = findViewById(R.id.webView);WebSettings webSettings = webView.getSettings();webSettings.setSupportZoom(false);webSettings.setBuiltInZoomControls(false);webSettings.setDisplayZoomControls(false);webSettings.setUseWideViewPort(true);webSettings.setLoadWithOverviewMode(true);webView.loadUrl("https://www.example.com");

    通过以上设置,WebView 将禁止用户缩放网页,并确保网页内容适应设备屏幕。无论在 Android 14 还是其他版本,这些设置都适用。

    ======================================================================

    如果上述设置仍然无法禁止 WebView 的缩放功能,你可以尝试以下几种方法:

    1. 在 HTML 中添加 viewport meta 标签:

    这个 meta 标签可以控制网页的缩放行为。user-scalable=no 参数可以禁止用户手动缩放网页。

    1. 使用 JavaScript 禁用缩放:

    如果你有控制网页内容的权限,可以在网页加载完成后,通过 JavaScript 禁用缩放功能。在 WebView 的 onPageFinished 回调中添加以下代码:

    webView.setWebViewClient(new WebViewClient() {    @Override    public void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);        view.evaluateJavascript("document.addEventListener('touchstart', function(event) { event.preventDefault(); }, false);", null);        view.evaluateJavascript("document.addEventListener('gesturestart', function(event) { event.preventDefault(); }, false);", null);    }});

    这段代码通过 JavaScript 禁用了触摸事件和手势事件,从而阻止了缩放行为。

    1. 创建自定义的 WebView:

    如果以上方法仍然无法满足需求,你可以考虑创建一个自定义的 WebView,并重写其 onTouchEvent 方法来拦截和处理触摸事件,禁止缩放操作。

    public class NonScalableWebView extends WebView {    public NonScalableWebView(Context context) {        super(context);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        if (event.getPointerCount() > 1) {            // 多个手指触摸时,禁止缩放            return false;        }        return super.onTouchEvent(event);    }}

    然后在布局文件中使用这个自定义的 WebView:

    =================================================================

    安卓中设置好属性，如果还是不管用，那么网页中仅保留这个吧，去掉initial-scale=1.0。

    并设置js

    禁止双指放大

    document.documentElement.addEventListener('touchstart', function (event) {

      if (event.touches.length > 1) {

        event.preventDefault();

      }

    }, false);

    禁止双击放大

    var lastTouchEnd = 0;

    document.documentElement.addEventListener('touchend', function (event) {

      var now = Date.now();

      if (now - lastTouchEnd