移动端CSS兼容性checkList

2.1 文字超长类

对于存在文本的盒子,包含但不限于button div span label input[placeholder]

  1. 容器类型是定宽通过 padding 自适应换行显示
  2. 定宽容器需要考虑 省略显示,数字文本优化显示(对文本最大长度有数,比如10000->1万)等
  3. 对于自适应不定宽容器、标题等容器,对最窄支持屏幕的最大宽度有数,需要和产品UI约定文案长度

    2.2 图片显示异常

2.2.1 图片不能正常显示

  1. 检查该图片(url 或 base64)是否能在谷歌浏览器正常打开
  2. 检查是否是 https 站点访问了 http 资源请求(部分系统webview如安卓默认禁止如此访问),或去掉资源协议头(http://a.jpg->//a.jpg)
  3. cdn 资源对请求来源有白名单限制
  4. https 资源,证书报错,可能原因为手机修改了当前时间

2.2.2 在页面缩放时,图片缺少或重复

由于浏览器缩放,或rem自适应缩放等,某些浏览器对容器宽度计算可能存在小数位(例如25放大后变成30.5)

  1. 使用 image 标签时

    • 是否考虑了图片渲染异常场景,添加默认图等解决?
  2. 使用 background 时

    • 检查是否有多张小图片icon拼接时候挨的太近
    • 检查图片容器是否设置了宽高(行内块或块元素等)
    • 检查图片是否设置了 background-size: contain 等保护图片缩放等属性
    • 不需重复的图片是否设置了 background-repeat: no-repeat 属性

2.3 行内文字或图标对齐问题

  1. 尽可能使用 flex 布局(保证兼容性的前提下)
  2. 在 flex 布局不能使用下,vertical-align 控制不优雅,建议采用 position 定位,定位几乎是通配解决方案
  3. 行内元素中,文本中夹杂特殊字符(如我是$#%),可能与(我是)高度不一致。
    • 如果某些盒子内部包含这个行内文本容器
    • 会使得盒子容器高度不同,这个文本容器可能会撑高
    • 需要对文本容器固定高度解决

2.4 异形屏顶部、底部问题

此处暂时讨论 CSS 能解决的异形屏问题(该机型有特殊的 CSS 标识)

  1. 建议对所有需兼容异形屏,单独拉出一个 CSS 文件做 hack,类似于 ie9.css / ie8.css 等
  2. 关注 iPhoneX 的适配
  3. 特别关注出现输入框的页面
    • ios下弹出键盘不影响容器高度,安卓下弹出键盘影响容器高度,需要区分处理
    • 遇到输入框遮挡关键部分,考虑一个问题及两种实现 case:
      1. 问题:输入框弹起,是否会影响当前手机大容器实际高度
      2. 实现:页面不动,收回键盘再做处理
      3. 实现:页面底部元素距底部定位
    • 考虑弹窗位置,随输入框弹出,输入时,如何调整
    • 有些弹窗,在输入法出现,并且点击输入时,会不断往上跳,并且收回输入法,依然存在(多见于 ios)

2.5 显示问题

  1. border 1px 线在华为部分手机、老版本手机显示异常
    • 使用 :before :after 代替 border

2.6 逻辑问题

2.6.1 ios 下点击某区域不能被 window.addEventLinster(‘click’) 捕获

解决方案
  • 方案1:
1
2
3
<div onclick="function () {}">
<!-- 此区域的点击无法被 window.addEventLinster('click') 捕获 -->
</div>

在无法触发点击区域的 DOM,增加一个空 onclick 事件即可

  • 方案2:
1
2
3
<body style="cursor: pointer;">
<!-- ... -->
</body>

参考

三、小程序 checkList 整理

3.1 垂直居中问题

  1. 推荐使用无脑flex布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- oppo r9s / 小米 5s 下,如下行内块垂直居中布局渲染有问题 -->
    <view style="height: 50rpx; line-height: 50rpx;">
    <text style="font-size: 20rpx;">行内</text>
    <view>
    <!-- 预警 -->
    <!-- 1. 加入text在20rpx字体渲染出的高度为40rpx,则父级的height必须大于40rpx -->
    <!-- 2. 否则 oppo r9st 的渲染让你怀疑你自己 -->

3.2 iphoneX下,边框消失问题

  • 情景:一个页面,某段DOM在操作下有/无切换,导致页面中一个tag标签的上边框渲染成有/无

  • 原因未知,用伪类after画边框,可解决

3.3 border 1rpx 设置 border-radius 后在 iOS 真机上显示不全的问题

  • 情景:border 设置为 1rpx 时正常展示,但设置 border-radius 圆角样式后出现底部 border 显示不全

  • 网上有人提出类似问题,应该是微信小程序的 bug,后采用伪类设置 border 为 2rpx,并使用 transform 的 scale 缩放到原来的 0.5 倍进行解决