Android 12中Jetpack Compose WebView的html/body 100%高度失效问题

核心问题分析 #

你遇到的情况是：WebView本身在Compose容器中尺寸正常，但内部HTML的html/body元素未正确继承WebView的高度，导致百分比高度失效。这本质是WebView原生布局参数未显式配置、移动端HTML缺少viewport适配共同导致的。

修复方案 #

1. 给WebView显式设置布局参数

在创建WebView时，必须为其设置MATCH_PARENT的宽高布局参数，确保原生View能正确接收Compose容器的尺寸：

factory = { context ->
    WebView(context).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
    }
},

2. 为HTML添加viewport meta标签

移动端WebView需要viewport配置才能正确解析百分比高度，在HTML的<head>中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height">

3. 配置WebSettings适配容器

开启WebView的自适应模式，确保页面能填满容器：

update = { webView ->
    webView.settings.apply {
        setLoadWithOverviewMode(true)
        setUseWideViewPort(true)
        javaScriptEnabled = true // 调试时开启，完成后可按需关闭
    }
    // 加载HTML的代码
}

完整修正代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WebViewScreen()
        }
    }
}

@Composable
fun WebViewScreen() {
    Box(modifier = Modifier.fillMaxSize()) {
        AndroidView(
            factory = { context ->
                WebView(context).apply {
                    layoutParams = ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT
                    )
                }
            },
            update = { webView ->
                webView.settings.apply {
                    setLoadWithOverviewMode(true)
                    setUseWideViewPort(true)
                    javaScriptEnabled = true
                }

                val HTMLstring = """
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height">
                        <style>
                            html, body { 
                                margin: 0; 
                                padding: 0; 
                                height: 100%; 
                                min-height: 100vh; /* 兜底兼容部分WebView版本 */
                            }
                        </style>
                    </head>
                    <body>
                        <div style='height: 100%; background-color: green;'></div>
                    </body>
                    </html>
                """.trimIndent()
                val encodedHTML = Base64.getEncoder().encodeToString(HTMLstring.toByteArray())
                webView.loadData(encodedHTML, "text/html", "base64")
            },
            modifier = Modifier.matchParentSize()
        )
    }
}

补充说明 #

• 添加min-height: 100vh是为了兼容部分旧版WebView，确保即使height:100%未生效，也能通过视口高度强制占满屏幕。
• 开启javaScriptEnabled仅用于调试阶段，正式发布可根据业务需求决定是否关闭。

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