《iOS 与 Android 样式差异避坑指南》

《避坑指南（iOS 和 Android 样式差异，你踩过这些坑吗？》

开发 UniApp 时，iOS 和 Android 的样式表现经常不一致，今天分享几个常见的样式差异和解决方案。

坑 1：padding 在不同平台的表现差异

```uniapp
<!-- iOS 上正常，Android 上 padding 不生效 -->
<view class="container">
<text>内容</text>
</view>
```

问题：Android 上 padding 可能被忽略，需要明确指定平台样式

解决方案：

```uniapp
<view class="container">
<text class="padding-fix">内容</text>
</view>

<style>
.container {
padding: 15rpx;
}
/* Android 平台单独处理 */
.container:android {
padding: 20rpx;
}
.padding-fix {
padding: 10rpx;
}
.padding-fix:android {
padding: 15rpx;
}
</style>
```

坑 2：字体大小不一致

```uniapp
<!-- iOS 上 14px 正常，Android 上可能显示为 16px -->
<text>这是一段文字</text>
```

解决方案：使用 `uni.getSystemInfoSync()` 动态调整

```uniapp
<script>
export default {
data() {
return {
fontSize: 14
}
},
onLoad() {
const info = uni.getSystemInfoSync();
// Android 字体默认偏大，适当缩小
if (info.platform === 'android') {
this.fontSize = 13;
}
}
}
</script>
```

坑 3：刘海屏适配

```uniapp
<!-- 顶部安全区域未处理 -->
<view class="header">
<image src="logo.png" mode="aspectFit" />
</view>
```

解决方案：

```uniapp
<view class="header" :style="{'marginTop': safeArea.top + 'px'}">
<image src="logo.png" mode="aspectFit" />
</view>
```

结语

样式差异是跨平台开发的常态，建议：
1. 多用 `:platform` 伪类处理差异
2. 真机测试，不要只依赖模拟器
3. 建立自己的样式差异文档


明天我们聊性能优化类的内容，比如 v-for 渲染陷阱！