设置 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);

相关推荐
Jeled12 小时前
Retrofit 与 OkHttp 全面解析与实战使用(含封装示例)
android·okhttp·android studio·retrofit
我命由我1234519 小时前
Android 对话框 - 对话框全屏显示(设置 Window 属性、使用自定义样式、继承 DialogFragment 实现、继承 Dialog 实现)
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
Jeled1 天前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
我命由我123451 天前
Android 开发问题:getLeft、getRight、getTop、getBottom 方法返回的值都为 0
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
Jeled1 天前
Android 网络层最佳实践:Retrofit + OkHttp 封装与实战
android·okhttp·kotlin·android studio·retrofit
nvvas1 天前
Android Studio JAVA开发按钮跳转功能
android·java·android studio
Jeled2 天前
Android 集成指南:Google 登录、Facebook 登录 与 Firebase 深入接入(实战)
android·kotlin·android studio·memcached·facebook
Jeled3 天前
Kotlin 实现社交 App 音视频模块:语音录制、播放、暂停与进度控制全流程封装
android·kotlin·android studio·音视频
撩得Android一次心动3 天前
Android studio 高效使用
android·ide·android studio
Jeled3 天前
协程工具类
android·android studio