在开发京东 App 订详时遇到的那些坑上篇文章提到最近在做订详一码三端的需求，在适配时遇到了一些坑，如果大家以后要用 T

上篇文章提到最近在做订详一码三端的需求，在适配时遇到了一些坑，如果大家以后要用 Taro 实现一码三端，也可以参考。

鸿蒙-样式继承

<View className={styles.parent}>
    <Text className={styles.child1}>child1</Text>
    <Text className={styles.child2}>child2</Text>
</View>

假如想要 child1 和 child2 都是红色、20px 的字体，需要这样设置：

/* 有效 */
.child1, .child2 {
    color: red;
    font-size: 23px;
}

/* 无效 */
.parent {
    color: red;
    font-size: 23px;
}

鸿蒙-overflow-x 不生效

<View className={styles.no_x_scroll}>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</View>

.no_x_scroll {
    overflow-x: auto;
    white-space: nowrap;
}

上述代码在鸿蒙中不会水平滚动，需要使用 ScrollView 组件替代。

Android-@media 不生效

如果想单独对大屏且横屏设置样式，你可能会这样写：

@media (min-width: 520px) and (orientation: landscape) {
    .is_large_and_landscape {
        width: 100%;
    }
}

不好意思，这样写在某些 Android 手机上不生效，比如 Redmi Note 11 Pro。

正确的姿势是使用 Taro.getSystemInfoSync。

const systemInfo = Taro.getSystemInfoSync()
// 判断是否横屏
const isLandscape = systemInfo.windowWidth > systemInfo.windowHeight
// 大屏且横屏
const isLargeAndLandscape = isLandscape && systemInfo.windowWidth >= 520
  
return <View className="isLargeAndLandscape">xxx</View>

持续更新中...