
最近做 SAP Fiori 页面验收时,经常会遇到一种很尴尬的反馈。业务同事在 Chrome 上看到的页面没问题,到了另一台电脑或移动设备上,标题被截断了,输入框提示文字不完整,甚至某个 TextArea 里的占位文本看起来像是突然少了一截。开发团队打开控制台,没有报错。OData 返回正常,Binding 也没断。Fiori Elements 生成的页面结构看起来也规规矩矩。可屏幕上的视觉结果就是不一样。这类问题在 SAPUI5 文档里有一个很准确的名字,Visual Degradations,中文可以理解为视觉降级。它不是业务逻辑错误,也不是控件一定写错了,而是在某些设备和浏览器组合下,浏览器底层渲染能力无法完全达到 SAPUI5 期望的视觉效果。sap.m 库面向移动优先、响应式布局和跨浏览器展示,越是追求在各种环境中保持一致,越会碰到浏览器原生能力边界。Visual Degradations 最容易被误解的地方就在这里。我们写的 XML View 没变,CSS 没变,UI5 版本没变,后端字段长度也没变,但浏览器处理文本截断、placeholder、滚动条、选择区域和光标位置时的行为并不完全一致。SAPUI5 可以封装控件 API,可以统一主题,可以把 Fiori Design Guideline 的模式沉淀成控件和模板,可它无法完全重写每一个浏览器引擎的排版细节。尤其是文本截断这种看起来很小的 UI 细节,背后牵涉到行高计算、字体渲染、CSS line clamp、overflow、浏览器原生 placeholder 实现和移动操作系统输入框行为。从 sap.m.Text 的 maxLines 说起在 Fiori