PC端/移动端常见的兼容性问题总结

送分小仙女□ 提交于 2019-12-08 02:20:33

移动端:

① 安卓浏览器看背景图片,有些设备会模糊,原因是手机的分辨率太小

解决方案: 用2X图片来代替img标签,然后background-size: contain

② 防止手机中页面放大或缩小: 在meta中设置viewport user-scalable = no

③ 上下拉滚动条卡顿: overflow-scrolling: touch;

④ 禁止复制选中文本: user-select: none;

⑤ 长时间按住页面出现闪退:-webkit-touch-callout: none;

⑥ 动画定义3D硬件加速: transform: translate 3d(0,0,0);

⑦ formate-detection 启动或禁止自动识别页面中的电话号码,content = "yes/no"

⑧ a标签添加tel是拨号功能

⑨ 安卓手机的圆角失效: background-clip: padding-box;

⑩ 手机端300ms延迟: fastclick

① 横平时字体加粗不一致: text-size-adjust: 100%;

 

PC端:

① rgba不支持IE8 用opacity属性代替rgba设置透明度

② 图片加a标签在IE9中出现边框 解决方案: img{border: none;}

③ IE6不支持display: inline-block       设置为: display: inline

④ position : fixed 不支持IE5/IE6 

⑤ IE6,Firfox中,width = width + padding + border

⑥ min-height比兼容IE6/IE7

 

转载于:https://www.cnblogs.com/xiaoya625/p/9278706.html

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!