Android中设置WebView禁止缩放网页的步骤

 更新时间:2024年05月25日 10:03:13   作者:lmyc-film  
在Android中如果你想要禁止WebView缩放网页,可以通过设置WebView的一些属性来实现,这篇文章主要给大家介绍了关于Android中设置WebView禁止缩放网页的步骤,需要的朋友可以参考下

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

  • 在 WebView 加载网页之前,获取 WebSettings 对象:
WebSettings webSettings = webView.getSettings();
  • 使用 WebSettings 对象禁用缩放:
webSettings.setSupportZoom(false);
webSettings.setBuiltInZoomControls(false);
webSettings.setDisplayZoomControls(false);
  • setSupportZoom(false) 禁止 WebView 支持缩放功能。
  • setBuiltInZoomControls(false) 禁用内置的缩放控件。
  • setDisplayZoomControls(false) 不显示缩放控件。
  • 此外,你还可以设置 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 的缩放功能,你可以尝试以下几种方法:

  • 在 HTML 中添加 viewport meta 标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

  • 使用 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 禁用了触摸事件和手势事件,从而阻止了缩放行为。

  • 创建自定义的 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:

<your.package.name.NonScalableWebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

以上方法可以帮助你在 Android 14 以及其他版本中禁止 WebView 的缩放功能。你可以根据实际情况选择适合的方法来实现。

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

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

<meta name="viewport" content="width=device-width">

并设置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 <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

总结

到此这篇关于Android中设置WebView禁止缩放网页的文章就介绍到这了,更多相关WebView禁止缩放网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android、Flutter为不同的CPU架构包打包APK(v7a、v8a、x86区别)

    Android、Flutter为不同的CPU架构包打包APK(v7a、v8a、x86区别)

    默认情况下,Android和Flutter打包出来的Apk都是包含了所有架构的,这样打出来的apk体积相对于单架构的apk有点大,这时,我们就需要分别打出不同的架构包
    2023-08-08
  • Android自定义组件跟随自己手指主动画圆

    Android自定义组件跟随自己手指主动画圆

    这篇文章主要为大家详细介绍了Android自定义组件跟随自己手指主动画圆,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android开发实现模仿360二维码扫描功能实例详解

    Android开发实现模仿360二维码扫描功能实例详解

    这篇文章主要介绍了Android开发实现模仿360二维码扫描功能,结合实例形式详细分析了Android开发二维码扫描功能所涉及的zxing开源项目文件使用方法及具体扫码功能相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • 简单实现Android验证码

    简单实现Android验证码

    在登录或者注册的时候要求输入验证码,这篇文章主要为大家详细介绍了如何简单实现Android验证码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • flutter 实现多布局列表的示例代码

    flutter 实现多布局列表的示例代码

    这篇文章主要介绍了flutter 实现多布局列表的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Android4.4开发之电池低电量告警提示原理与实现方法分析

    Android4.4开发之电池低电量告警提示原理与实现方法分析

    这篇文章主要介绍了Android4.4开发之电池低电量告警提示原理与实现方法,结合实例形式分析了Android4.4电池电量警告的原理及相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • Android inflater 用法及不同点

    Android inflater 用法及不同点

    在 实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById()。这篇文章主要介绍了Android inflater 用法,需要的朋友可以参考下
    2018-11-11
  • React Native中Android物理back键按两次返回键即退出应用

    React Native中Android物理back键按两次返回键即退出应用

    这篇文章主要给大家介绍了关于React Native中Android物理back键按两次返回键即退出应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • Android ListView数据的分批显示功能

    Android ListView数据的分批显示功能

    本文通过实例代码给大家分享了Android ListView数据的分批显示功能,非常不错具有参考借鉴价值,需要的朋友参考下吧
    2017-04-04
  • 详解Android中的SharedPreferences

    详解Android中的SharedPreferences

    这篇文章主要介绍了Android中的SharedPreferences,包括 SharedPreferences的特点和使用方法,需要的朋友可以参考下
    2017-05-05

最新评论