苹果浏览器和uc浏览器在移动端的坑(日常积累,随时更新)

时间:2024-08-18 21:05:32

先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/