writing-mode: vertical-rl 在移动端需配合 text-orientation: mixed、显式 height 和真机测试才可靠，否则因字符朝向不统一、盒模型翻转导致文字歪斜或塌陷。
writing-mode: vertical-rl 在移动端能用，但必须配合 text-orientation: mixed、显式 height 和真机测试，否则大概率失效或错位。
为什么只写 writing-mode: vertical-rl 文字会歪或塌陷？
因为该属性只改文本流方向，不控制字符朝向：英文字母和数字默认顺时针转 90°，汉字却直立；同时块级容器的盒模型语义翻转——height 变成“视觉宽度”，width 变成“列高”。没设 height 就会塌成一条线。
-
text-orientation: mixed是中英文混排的底线配置，让汉字直立、西文保持水平 - 必须手动设
height（比如height: 200px），不能依赖auto或min-height -
white-space: nowrap防止短文本在窄屏里意外换行
微信和旧版 iOS 怎么检测并降级？
微信 Android（尤其 8.0.30 之前）X5 内核基本忽略 writing-mode；iOS 微信则取决于系统 WebKit 版本，iPhone 6s 及更早设备大概率不生效。
- 运行时检测：
getComputedStyle(el).writingMode !== 'vertical-rl'时触发降级 - 别用图片降级——可用
transform: rotate(90deg)+overflow: hidden模拟，但注意 touch 坐标偏移 - 降级后需重设
width/height，因为旋转后尺寸逻辑反转
竖排容器里用 flex 或 grid 会出什么问题？
直接给 display: flex 或 display: grid 的父容器加 writing-mode，会导致主轴定义冲突、子项堆叠错位、justify-content 含义反转。
立即学习“前端免费学习笔记（深入）”；
- 导航栏等结构化内容，优先用
flex-direction: column+text-orientation: upright替代 - 若必须嵌套，只对纯文本子元素（如
<p>或<span>）应用writing-mode - 避免用
text-align: right对齐——它在竖排下实际是顶部对齐；改用text-align: start或margin-block-start
字体 fallback 和标点怎么处理才不崩？
不是所有中文字体都支持竖排渲染：系统默认的 -apple-system 在竖排时可能压扁标点，某些字体甚至让破折号——、省略号…歪斜或错位。
-
font-family必须写全："PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif - 纯数字串（如
2024）会整体躺倒，想正立就得单独包一层<span>并设text-orientation: upright - 避免用
text-orientation: sideways——它会让汉字也躺倒，完全违背中文排版意图
真正麻烦的不是写几行 CSS，而是不同 WebView 对 writing-mode 的实现差异太碎：同一段代码，在 iOS Safari 16、微信 iOS、微信 Android、Chrome for Android 上表现可能完全不同。真要上线，必须每种环境都拿真机跑一遍，不能只靠模拟器或桌面调试器。
