Kotlin WebView加载网站异常，求助排查缺失配置

使用Kotlin为个人网站开发WebView应用，应用运行正常但网站加载显示异常。此前在带登录密码功能的其他WebView代码测试中均无问题，仅自行编写的代码出现该情况，怀疑是wb_webView?.apply代码块中缺少部分配置。

现有代码 #

package com.shareworld.android

import android.annotation.SuppressLint
import android.content.Intent
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebSettings
import androidx.preference.PreferenceManager
import android.webkit.WebView
import android.webkit.WebViewClient
import com.vorlonsoft.android.rate.AppRate
import com.google.firebase.analytics.FirebaseAnalytics
import com.google.firebase.analytics.ktx.analytics
import com.google.firebase.ktx.Firebase

class MainActivity : AppCompatActivity() {

    private var wb_webView: WebView? = null

    private lateinit var firebaseAnalytics: FirebaseAnalytics

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        firebaseAnalytics = Firebase.analytics

        setUpUI()
        webViewSetup()
        setUpAppRate()

        val defaultSharedPreferences = PreferenceManager.getDefaultSharedPreferences(this)
        val onboardingWasPresented = defaultSharedPreferences.getBoolean("tutorial", false)

        if (shouldShowOnboarding && !onboardingWasPresented) {
            showOnboarding()
        }
    }

    private fun setUpUI() {
        setTheme(R.style.Theme_NeoWeb)
        try {
            this.supportActionBar?.hide()
        } catch (e: NullPointerException) {}
        setContentView(R.layout.activity_main)
        wb_webView = findViewById(com.shareworld.android.R.id.wb_webView)
    }

    @SuppressLint("SetJavaScriptEnabled")
    private fun webViewSetup() {
    wb_webView?.webChromeClient = WebChromeClient()
    wb_webView?.webViewClient = WebViewClient()
    wb_webView?.apply {
        loadUrl(websiteUrl)
        settings.javaScriptEnabled = true
        settings.domStorageEnabled = true
    }
}

    private fun setUpAppRate() {
        AppRate.with(this).monitor()
        AppRate.showRateDialogIfMeetsConditions(this)
    }

    private fun showOnboarding() {
        val intent = Intent(this, IntroActivity::class.java)
        startActivity(intent)
    }

    override fun onBackPressed() {
        if (wb_webView?.canGoBack() == true) {
            wb_webView?.goBack()
        } else {
            super.onBackPressed()
        }
    }
}

异常说明 #

网站加载后样式错乱、内容排版异常，无法正常显示网页原本的布局。

你的WebView配置确实缺少了现代网页渲染必需的关键项，补充以下配置即可解决显示问题：

• 允许JavaScript打开新窗口：适配依赖弹窗或多窗口的网页功能
• 固定默认文本缩放比例：避免页面因缩放异常导致排版错乱
• 启用数据库存储：支持网站的本地数据存储需求
• 配置缓存模式：保证资源加载的正确性与速度
• 设置标准用户代理：避免网站识别WebView后返回适配异常的页面
• 允许混合内容加载：适配同时包含HTTP和HTTPS资源的网站

修改后的webViewSetup方法 #

@SuppressLint("SetJavaScriptEnabled")
private fun webViewSetup() {
    wb_webView?.webChromeClient = WebChromeClient()
    wb_webView?.webViewClient = WebViewClient()
    wb_webView?.apply {
        loadUrl(websiteUrl)
        settings.apply {
            javaScriptEnabled = true
            domStorageEnabled = true
            // 补充的核心配置
            javaScriptCanOpenWindowsAutomatically = true
            defaultTextZoom = 100
            databaseEnabled = true
            cacheMode = WebSettings.LOAD_DEFAULT
            userAgentString = "Mozilla/5.0 (Linux; Android ${Build.VERSION.RELEASE}; ${Build.MODEL}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${Build.VERSION.SDK_INT} Mobile Safari/537.36"
            
            // 适配Android 5.0+的混合内容加载
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
            }
        }
    }
}

额外检查项 #

1. 确认websiteUrl变量已正确赋值为完整的网站地址（必须包含http://或https://前缀）
2. 检查AndroidManifest.xml中是否添加了网络权限：

   <uses-permission android:name="android.permission.INTERNET" />
   

3. 若网站存在HTTPS证书问题（仅测试环境临时使用，正式环境不建议），可修改WebViewClient跳过证书验证：

   wb_webView?.webViewClient = object : WebViewClient() {
       @SuppressLint("WebViewClientOnReceivedSslError")
       override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) {
           handler?.proceed()
       }
   }
   

内容的提问来源于stack exchange，提问作者Emre