根本原因是浏览器对text-orientation、direction及盒模型翻转的实现差异，尤其旧内核和WebView中存在逻辑缺失或降级；iOS Safari 12.2以下不解析text-orientation致汉字旋转、英文直立，微信X5内核跳过writing-mode声明并错误计算高度。
writing-mode 竖排在各端表现不一致，根本原因不是“支持与否”，而是浏览器对 text-orientation、direction、盒模型翻转的实现程度不同，尤其在旧内核和 WebView 中逻辑缺失或降级处理。
vertical-rl 在 iOS Safari 和微信 X5 内核中为何失效？
不是完全不识别 writing-mode: vertical-rl，而是关键配套行为被忽略：
- iOS Safari 12.2 以下（如 iPhone 6s 及更早）Webkit 版本不解析
text-orientation，导致汉字被旋转 90°，英文反而直立——视觉上全乱 - 微信 Android（8.0.30 之前）X5 内核直接跳过
writing-mode声明，回退为横排，且不触发@supports检测 - 即使声明了
height: 200px，X5 内核仍按横排逻辑计算高度，最终渲染为 0 或截断
text-orientation: mixed 在 Chrome/Firefox/iOS 上行为不一致
这个值本意是“汉字直立、西文旋转”，但标点处理无统一规范：
- Chrome 和 Firefox 把顿号（、）、破折号（——）、省略号（…）当西文旋转，导致竖排时歪斜或错位
- iOS Safari 将部分中文标点视为“中性字符”，既不旋转也不强制直立，依赖字体 hinting，结果不可控
- 若内容含 API 名（如
v2.1）、缩写（如HTTP），mixed下数字和大写字母会躺倒，阅读成本陡增；此时必须换用text-orientation: upright
height / width 含义翻转后，移动端布局极易塌陷
vertical-rl 下，块级容器的 height 控制的是“视觉宽度”（即单字横向跨度总和），width 控制的是“视觉高度”（即文字从上到下堆叠的总长）：
- 设
height: auto或min-height: 100px→ iOS Safari 和 Android X5 直接塌成一条线 - 用
flex: 1或grid-area包裹竖排容器 → 主轴尺寸逻辑冲突，高度丢失 - 响应式场景下用
height: 100vh→ 在微信 iOS 中常被 viewport 缩放干扰，实际高度不足
Flex/Grid 容器加 writing-mode 导致子项堆叠错乱
给 display: flex 父容器设 writing-mode: vertical-rl，不会让子项竖排文字，反而破坏布局流：
-
justify-content: center变成垂直居中（因主轴已翻转），不是你想要的“水平居中” -
align-items: flex-start实际表现为右对齐（因 inline-start 在 vertical-rl 下是右侧） - Grid 中若对
grid-container设该属性，grid-template-columns的定义会被无视，子项强行按文本流堆叠 - 正确做法：只在纯文本元素（如
<p></p>、<span></span>）上设writing-mode，父容器保持horizontal-tb流
真正难的不是写对那三行 CSS，而是在不同设备上确保 text-orientation 被执行、height 不被忽略、标点不意外旋转——这些细节没有 warning，只在真机上静默出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
