Compose Multiplatform Web 移动端布局偏移问题解析与解决方案

问题现象

在使用 Compose Multiplatform 开发 Web 应用时，开发者发现当在智能手机竖屏模式下访问 Wasm 生成的网站时，页面布局会出现偏移问题。具体表现为：

1. 部分布局内容被隐藏，无法完整显示在可视区域内
2. 某些元素超出了根可组合项的边界范围
3. 触摸目标位置与实际显示位置不匹配，用户需要向下触摸才能触发正确的事件

技术背景

Compose Multiplatform 是 JetBrains 推出的跨平台 UI 框架，允许开发者使用 Kotlin 和声明式语法构建适用于多个平台的应用程序。其中 Web 平台支持通过 Kotlin/Wasm 技术将 Compose UI 编译为可在浏览器中运行的 WebAssembly 代码。

问题复现

通过一个简单的示例代码可以复现该问题：

@Composable
fun TwoBoxes() {
    Column(modifier = Modifier.fillMaxSize().padding(24.dp)) {
        Box(
            modifier = Modifier.weight(0.5f)
                .fillMaxSize()
                .border(
                    width = 1.dp,
                    color = MaterialTheme.colorScheme.outline
                )
        )
        Box(
            modifier = Modifier.weight(0.5f)
                .fillMaxSize()
                .border(
                    width = 1.dp,
                    color = MaterialTheme.colorScheme.outline
                )
        )
    }
}

这段代码本应创建两个等高的 Box，但在移动端竖屏模式下会出现布局偏移问题。

问题分析

经过深入分析，发现该问题与移动端浏览器的视口(viewport)设置有关。移动浏览器默认会尝试以"桌面模式"渲染网页，导致视口缩放和布局计算出现偏差。具体表现为：

1. 在竖屏模式下，浏览器会尝试以较宽的视口宽度渲染页面
2. 导致内容被缩放，部分区域被裁剪
3. 触摸事件坐标与实际显示位置不匹配
4. 横屏模式下由于视口宽度足够，问题不会显现

解决方案

解决此问题的关键在于正确配置移动端视口。通过在 HTML 文件中添加以下 meta 标签即可修复：

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

这个解决方案的作用是：

1. width=device-width 告诉浏览器使用设备宽度作为视口宽度
2. initial-scale=1.0 设置初始缩放比例为 1:1
3. 确保页面以实际设备尺寸渲染，避免缩放和偏移

最佳实践

对于 Compose Multiplatform Web 项目，建议开发者：

1. 始终在 HTML 模板中包含视口 meta 标签
2. 测试时重点关注移动端竖屏模式下的布局表现
3. 使用 Chrome 开发者工具的移动设备模拟器进行预览
4. 考虑不同设备的像素密度差异，使用 dp 单位而非 px

总结

Compose Multiplatform 为 Web 开发带来了新的可能性，但在移动端适配方面仍需注意浏览器特定的行为。通过正确配置视口设置，可以确保应用在各种设备上都能正确显示。这个问题也提醒我们，跨平台开发时需要充分考虑各平台的特性差异，才能提供一致的用户体验。