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

Pink 发布于2019-08-02 15:38 / 1623人阅读

摘要：发布于蒙层点击滚动穿透问题描述移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动解决方式蒙层出现的时候，给底部被覆盖的滚动容器并设置。

发布于：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; 这个也不会生效的。

云服务器 GPU云服务器兼容支持webrtc的移动端 webrtc移动端兼容性 MySQL授权问题总结兼容问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54260.html

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

摘要：发布于蒙层点击滚动穿透问题描述移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动解决方式蒙层出现的时候，给底部被覆盖的滚动容器并设置。发布于：https://www.luoyangfu.com/art... 蒙层点击滚动穿透问题描述: 移动端浮层内部滚动的时候，会导致浮层覆盖的下面内容也会滚动解决方式:蒙层出现的时候，给底部被覆盖的滚动容器 position: fixe...

siberiawolf 2019-08-30 15:44 评论0 收藏0
移动端兼容问题总结(2)

摘要：发布于上使用等相对变量单位后，为椭圆描述根据网上解决方案设置为具体值即可。在移动端兼容问题解决如果有其他解决方案，请不吝赐教。发布于: https://luoyangfu.com/article... android 上使用 em,rem 等相对变量单位后，border-radius: 50% 为椭圆描述showImg(https://cdn-cos.luoyangfu.com/...

qpwoeiru96 2019-08-02 15:29 评论0 收藏0
移动端兼容问题总结(2)

摘要：发布于上使用等相对变量单位后，为椭圆描述根据网上解决方案设置为具体值即可。在移动端兼容问题解决如果有其他解决方案，请不吝赐教。发布于: https://luoyangfu.com/article... android 上使用 em,rem 等相对变量单位后，border-radius: 50% 为椭圆描述showImg(https://cdn-cos.luoyangfu.com/...

XanaHopper 2019-08-30 11:23 评论0 收藏0
移动端网站开发前端学习总结

摘要：关于适配宋体移动端适配可以使用宋体宋体也可配合百分比宽度一起使用宋体宋体十分适用于适配默认为以为单位。1.关于适配: 移动端适配可以使用lib-flexible（也可配合百分比宽度一起使用）十分适用于webapp适配 Font-size默认为12px 以rem为单位。关于lib-flexible详解：http://www.w3cplus.com/mobile/lib-flexible-fo...

番茄西红柿 2019-04-23 11:53 评论0 收藏0
总结移动开发实践中遇到的坑

摘要：博主之前已经推荐了一款神器下面，就总结一下移动端遇见的坑。解决原理虚拟键盘弹出时将元素设置为，虚拟键盘消失时候设置回来。解决方案由于虚拟键盘出现并未抛出事件，而检测或者事件，皆会有一定延迟，会出现闪烁现象。做过很多移动端的项目，在开发调试过程中，一款好的调试工具会让效率大大提高。博主之前已经推荐了一款神器：http://web.jobbole.com/87587/ 下面，就总结一下移...

rockswang 2019-08-29 11:16 评论0 收藏0