前端兼容性收集-持续更新

兼容性:
环境:ios 端,微信打开H5页面
问题描述:在登录页面,有输入手机号,以及输入验证码input框两个,点击其中一个后会弹出手机端键盘,导致整个页面上移动,将键盘隐藏后高度定位失败,导致底部有灰色背景条。并且使用fixed定位父元素后,页面元素点击混乱。
问题定位:fixed定位后,键盘弹出,元素往上顶,收起键盘后,元素渲染已经复位,但是元素点击框还是留在原地,导致点击元素不中,因为元素还在原来的位置。
解决方案:给input 框添加监听失去焦点事件,失去焦点时,页面滚到到顶部,就不会出现灰色背景条了。document.body.scrollTop = 0;document.documentElement.scrollTop = 0;

兼容性:
环境:支付宝小程序
问题描述:跳转到新页面,再返回到旧页面,旧页面高度定位错乱,高度不会随着页面内容高度改变而改变。
问题定位:使用页面其他元素跳转,在返回到旧页面没有问题。只有点击input输入框跳转新页面会导致这个问题出现。查看源码发现,监听的是input获取焦点事件,获取焦点就跳转新的搜索页面。
解决方案:给input添加一层遮罩层,获取遮罩层点击事件,然后进行跳转到新的搜索页面,测试后没有问题。

兼容性:
环境:android 系统,支付宝小程序
问题描述:地图组件使用label,字体颜色失效,在ios端显示正常
问题定位:操作系统兼容性问题
解决方案:在label 配置对象中,color:#fff; 配置使用了3个“#fff”, 改为6个"#ffffff"后, label字体颜色显示正常

兼容性:
环境: 支付宝小程序,使用真机测试
问题描述:map地图组件,如何处理全屏显示问题,高度height:100% 没有生效。
问题定位:高度不能使用百分百
解决方案:
方案1 使用my.getSystemInfo 获取设备高度,然后绑定到页面中 height: {{screenHeight}}px; 处理后,地图能够占满全屏,但是出现兼容性问题:地图缩放功能混乱、 不能定位居中坐标。所以没有再测试,放弃该方案。
方案2 既然在地图中上下滑动不会出现滚动条,尝试把map组件的高度设置一个很大的值,测试可以。采用方案2.给map添加父元素view, 然后设置高宽为100%, map组件高度为 800px)

兼容性:
环境:android 系统
问题描述:字体居中使用 line-height 没有生效
问题定位:字体大小小于12px, 导致字体不能居中
解决方案:查看各种资料,没有完美解决方案,暂时采用比较有兼容性修复方案,使用css3 缩放

兼容性:
环境:在微信公众号中H5(微信浏览器),ios 系统和android 系统
问题描述:字体颜色没有生效,但使用手机其他浏览器访问没有异常,除了微信。
解决方案:检查css样式,发现字体颜色属性为, color: #ffff; 因为使用了4个f,而不是使用3个fff, 导致兼容性问题,删除一个f 后属性为, color: #fff; 测试后字体颜色显示正常。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,368评论 0 7
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,227评论 0 1
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,453评论 0 20
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,246评论 0 1
  • 早上七点,孩子正常起床,我要赶七点一刻的班车。 妈妈,我今天不要穿短袖,无论如何也不能穿。 (解码)哦,你觉得今天...
    smilerock阅读 121评论 0 1