快捷導(dǎo)航

Android中設(shè)置WebView禁止縮放網(wǎng)頁(yè)的步驟

更新時(shí)間：2024年05月25日 10:03:13 作者：lmyc-film

在Android中如果你想要禁止WebView縮放網(wǎng)頁(yè),可以通過設(shè)置WebView的一些屬性來(lái)實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于Android中設(shè)置WebView禁止縮放網(wǎng)頁(yè)的步驟,需要的朋友可以參考下

在 Android 14 中,你可以通過以下步驟來(lái)設(shè)置 WebView,禁止縮放網(wǎng)頁(yè):

在 WebView 加載網(wǎng)頁(yè)之前,獲取 WebSettings 對(duì)象:

WebSettings webSettings = webView.getSettings();

使用 WebSettings 對(duì)象禁用縮放:

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

setSupportZoom(false) 禁止 WebView 支持縮放功能。
setBuiltInZoomControls(false) 禁用內(nèi)置的縮放控件。
setDisplayZoomControls(false) 不顯示縮放控件。

此外,你還可以設(shè)置 WebView 的 setUseWideViewPort 和 setLoadWithOverviewMode 屬性,以確保網(wǎng)頁(yè)適應(yīng)設(shè)備屏幕,不允許用戶縮放:

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

setUseWideViewPort(true) 設(shè)置 WebView 使用廣泛的視口,使網(wǎng)頁(yè)內(nèi)容適應(yīng)屏幕寬度。
setLoadWithOverviewMode(true) 設(shè)置 WebView 加載的頁(yè)面以總覽模式顯示,即按屏幕大小縮放內(nèi)容。

完整示例代碼:

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");

通過以上設(shè)置,WebView 將禁止用戶縮放網(wǎng)頁(yè),并確保網(wǎng)頁(yè)內(nèi)容適應(yīng)設(shè)備屏幕。無(wú)論在 Android 14 還是其他版本,這些設(shè)置都適用。

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

如果上述設(shè)置仍然無(wú)法禁止 WebView 的縮放功能,你可以嘗試以下幾種方法:

在 HTML 中添加 viewport meta 標(biāo)簽:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

這個(gè) meta 標(biāo)簽可以控制網(wǎng)頁(yè)的縮放行為。user-scalable=no 參數(shù)可以禁止用戶手動(dòng)縮放網(wǎng)頁(yè)。

使用 JavaScript 禁用縮放:

如果你有控制網(wǎng)頁(yè)內(nèi)容的權(quán)限,可以在網(wǎng)頁(yè)加載完成后,通過 JavaScript 禁用縮放功能。在 WebView 的 onPageFinished 回調(diào)中添加以下代碼:

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 禁用了觸摸事件和手勢(shì)事件,從而阻止了縮放行為。

創(chuàng)建自定義的 WebView:

如果以上方法仍然無(wú)法滿足需求,你可以考慮創(chuàng)建一個(gè)自定義的 WebView,并重寫其 onTouchEvent 方法來(lái)攔截和處理觸摸事件,禁止縮放操作。

public class NonScalableWebView extends WebView {
    public NonScalableWebView(Context context) {
        super(context);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getPointerCount() > 1) {
            // 多個(gè)手指觸摸時(shí),禁止縮放
            return false;
        }
        return super.onTouchEvent(event);
    }
}

然后在布局文件中使用這個(gè)自定義的 WebView:

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

以上方法可以幫助你在 Android 14 以及其他版本中禁止 WebView 的縮放功能。你可以根據(jù)實(shí)際情況選擇適合的方法來(lái)實(shí)現(xiàn)。

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

安卓中設(shè)置好屬性，如果還是不管用，那么網(wǎng)頁(yè)中僅保留這個(gè)吧，去掉initial-scale=1.0。

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

并設(shè)置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);

總結(jié)

到此這篇關(guān)于Android中設(shè)置WebView禁止縮放網(wǎng)頁(yè)的文章就介紹到這了,更多相關(guān)WebView禁止縮放網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: