苹果浏览器和uc浏览器在移动端的坑（日常积累，…

先mark

1 .  移动端uc浏览器不兼容css3 calc()

2 .  ie8下a标签没有内容给宽高也不能触发点击跳转

3 . safari输入框加上readOnly="ture"属性仍然可以触发获取焦点，可再加上onfocus="this.blur()“解决

4 .  animate在移动端卡顿严重，移动端运动要用css3实现

5 .  ios下伪类事件失效，可给当前元素的touchstart/touchend事件绑定一个空匿名函数 解决

6 . 移动端或webapp下点击元素背景变蓝，可给点击元素或body加-webkit-tap- highlight-color:transparent;解决

7 . ios下点击事件失效，可给点击元素加cursor:pointer;解决

8 . display:flex在uc端需做兼容处理，父级为：

display:-webkit-box;display:flex;display:-webkit-flex;

　　子级为：

-webkit-box-flex:1;-webkit-flex:1;flex:1;

　　可兼容safari、微信、uc三种最大用户群

 9 . 清除苹果下button按钮的默认样式：-webkit-appearance: none;

10 .当移动端想要截取图片为正方形又不想缩放时，可给图片一个父级，给父级相同宽高再溢出隐藏，高度如何与宽度保持一致便成了最关键的问题，虽然js一行就可以搞定，但是我们总监坚持不用js就不让用js，所以css单位 vw便派上用场了。

　　vw是相对于窗口的单位，100vw相当于100%窗口的宽度，这样高度和宽度就可以同步设置，比如：width:30vw;height:30vw;

　　项目地址为：m.tn.ccoo.cn/tieba/

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有