Avoid Common iOS vs Android Styling Pitfalls in UniApp

When building UniApp applications, developers often encounter style inconsistencies between iOS and Android. This guide presents three common pitfalls and concrete fixes.

Pitfall 1: Padding behaves differently

Problem: Android may ignore padding defined in a view.

Solution: Define platform‑specific styles using the :android pseudo‑class.

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

.container { padding: 15rpx; }
/* Android specific */
.container:android { padding: 20rpx; }
.padding-fix { padding: 10rpx; }
.padding-fix:android { padding: 15rpx; }

Pitfall 2: Font size inconsistency

Problem: The same text may appear as 14 px on iOS but 16 px on Android.

Solution: Detect the platform with uni.getSystemInfoSync() and adjust the font size in script.

<script>
export default {
  data() {
    return { fontSize: 14 }
  },
  onLoad() {
    const info = uni.getSystemInfoSync();
    if (info.platform === 'android') {
      this.fontSize = 13;
    }
  }
}
</script>

Pitfall 3: Notch (safe‑area) adaptation

Problem: The top safe area is not handled, causing content to be obscured on devices with a notch.

Solution: Bind the top margin to the safe‑area height.

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

Conclusion

Style differences are inevitable in cross‑platform development. Recommended practices:

Use the :platform pseudo‑class to handle differences.

Test on real devices rather than relying solely on emulators.

Maintain a personal documentation of style discrepancies.

Next time the author will discuss performance‑related pitfalls such as v‑for rendering traps.