设置 WebView,禁止缩放网页

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

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

    WebSettings webSettings = webView.getSettings();

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

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

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

    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 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个 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:

复制代码
<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);

相关推荐
麦兜*2 天前
【swift】SwiftUI动画卡顿全解:GeometryReader滥用检测与Canvas绘制替代方案
服务器·ios·swiftui·android studio·objective-c·ai编程·swift
编程乐学2 天前
网络资源模板--基于Android Studio 实现的通讯录App
android·android studio·移动端开发·通讯录app·安卓大作业
bytebeats2 天前
# Android Studio Narwhal Agent 模式简介
android·android studio
小仙女喂得猪5 天前
2025再读Android RecyclerView源码
android·android studio
一枚小小程序员哈5 天前
基于Android的音乐播放器/基于android studio的音乐系统/音乐管理系统
android·ide·android studio
沅霖8 天前
下载Android studio
android·ide·android studio
沅霖10 天前
Android Studio切换到经典UI,老UI
android·ui·android studio
闻道且行之12 天前
Android Studio下载及安装配置
android·ide·android studio
小墙程序员12 天前
kotlin元编程(二)使用 Kotlin 来生成源代码
android·kotlin·android studio
小墙程序员12 天前
kotlin元编程(一)一文理解 Kotlin 反射
android·kotlin·android studio