您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

行動 App 內嵌網頁底部導航異常：WebView 相容性排查指南

編輯：程式設計綜合問答

問題現象

網頁在 PC 瀏覽器、手機瀏覽器均正常，但在 App 內嵌 WebView 中底部導航錯位、遮擋或消失。

常見原因與解決方案

原因	說明	解決
Viewport 未正確設定	App WebView 預設寬度可能非裝置寬度	HTML 加入 `<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">`
安全區域/刘海屏遮擋	iOS 11+ / Android P+ 底部 Home Indicator 區域	CSS 使用 `env(safe-area-inset-bottom)` 或 `constant(safe-area-inset-bottom)` 留白
WebView 設定差異	未啟用 JavaScript、DOM Storage、縮放支援	Android: `settings.setDomStorageEnabled(true); settings.setJavaScriptEnabled(true);` iOS: `WKWebView` 預設較完善
fixed 定位失效	部分舊版 WebView 對 `position:fixed` 底部支援不佳	改用 `position:sticky` 或 JS 監聽滾動動態調整
User-Agent 差異	App 註入自定 UA 導致 CSS 媒體查詢誤判	檢查 UA 字串，或用特徵偵測替代 UA 判斷

安全區域 CSS 範例

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    padding-bottom: env(safe-area-inset-bottom, 0); /* iOS 11+ */
    padding-bottom: constant(safe-area-inset-bottom, 0); /* iOS 11- */
    background: white;
    z-index: 1000;
}

Android WebView 必備設定清單

WebView webView = findViewById(R.id.webview);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setLoadWithOverviewMode(true);
settings.setUseWideViewPort(true);
settings.setSupportZoom(false);
webView.setWebChromeClient(new WebChromeClient());
webView.setWebViewClient(new WebViewClient() {
    @Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});