移动端兼容问题总结(3)

发布于:
https://www.luoyangfu.com/art…

蒙层点击滚动穿透问题

描述: 移动端浮层内部滚动的时候,会导致浮层覆盖的下面内容也会滚动

解决方式:

蒙层出现的时候,给底部被覆盖的滚动容器
position: fixed; 并设置
overflow: hidden。如果有可能可以可以设置
width: 100vw; height: 100vh这样,防止滚动穿透

flex布局下文本省略问题

描述: 在flex 布局下,text-overflow 会失效, 无法使用样式让文字自动省略

解决方式:

flex 布局下包裹一层,然后设置父级层
min-width: 0 即可。

2019-08-02 补充:

关于min-width: 0原因,在于flex布局下,min-width 默认值为 auto, 设置min-width: 0; 让flex布局更合理的表现.

MDN规范说明Specifications

w3c中 《CSS Flexible Box Layout Module》

2分钟学个CSS小技巧 flex 项中子元素文本溢出截断 text-overflow:ellipsis 失效问题 – flexbox 布局中 flex 项的宽度计算原理

移动端1px问题

position: fixed 在ios 抖动问题

描述: 在滚动容器,设置fixed元素的时候,ios下会一直抖动

从滚动容器中移除 fixed 布局的元素,改在外面fixed

rem, em等产生小数像素值在android下问题

描述: 使用相对的单位时候,出现0.989px这样的单位,android下无效

修改为粗字体时候,会导致::after 消失

android 字体无法加粗问题

描述: 给予android webview上 font-family 粗体时候, 字体无法加粗

设置font-weight: bold。在ios上不会生效,在android上时候,字体会变粗。不能设置font-weight: number; 这个也不会生效的。

    原文作者:zsirfs
    原文地址: https://segmentfault.com/a/1190000019871100
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞