移动web开发细节处理

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。
备注:transparent的属性值在android下无效。
2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现一个小问题就是,加了上面的属性后,iOS下默认还是带有圆角的,不过可以使用border-radius属性修改。
3、-webkit-transform:translate3d(0, 0,0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式,无需通过JS引擎,直接浏览器内核渲染),但是在android下不可乱用,很多见所未见的bug就是因为这个。
4、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐用cover这个值,可以自动去匹配宽和高。
5、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。
6、android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具实现。
7、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
8、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。
9、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。
10、如果你希望你的站点更多地在SNS上传播,那么Open GraphProtocol会比较适合你。
11、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。
12、iphone的Retina显示屏的css中的数值都得翻倍,包括图片大小也得翻倍,Retina显示屏精致,可以简单理解为Retina显示屏上的1像素相当于普通的2像素。
13、解决闪屏,-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;
14、触摸事件用touch系列,不要用click替代;
15、在处理IOS设备web页面的时候常常会遇到这样的问题,当我点击摸个元素时,点击区域会出现闪一下的情况。解决方法其实很简单,只需要给出现情况的元素加上下面的样式就能解决问题了。
     代码如下:-webkit-tap-highlight-color:rgba(0,0,0,0);这是ios设备特有的样式,原理是去掉ios背面的颜色。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值