本文详细介绍了在iOS和Android双平台下优化Web开发的16个关键技巧，包括样式、动画、交互、性能提升等。通过应用这些技巧，开发者能够更有效地创建跨平台兼容性极强的应用程序，提升用户体验。
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-keyframes可以预定义很多你所想到的动画，然后通过-webkit-transition来调用。
5、-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size，所以有必要两个都要写上；用这个属性的时候推荐用cover这个值，可以自动去匹配宽和高。
6、border-radius、box-shadow、gradient、border-image，不解释，可以精简代码。
7、android、ios4及以下，固定宽/高块级元素的overflow:scroll/auto失效，属于浏览器的bug，可借助第三方工具实现。
8、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
9、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。
10、如果涉及较多域外链接，DNS Prefetching可以帮你做DNS预解析。
11、如果你希望你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。
12、当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。
13、IOS禁止横竖屏时字体变大，-webkit-text-size-adjust: none;
14、iphone的Retina显示屏的css中的数值都得翻倍，包括图片大小也得翻倍，Retina显示屏精致，可以简单理解为Retina显示屏上的1像素相当于普通的2像素。
15、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
16、触摸事件用touch系列，不要用click替代；
17、在处理IOS设备web页面的时候常常会遇到这样的问题，当我点击摸个元素时，点击区域会出现闪一下的情况。解决方法其实很简单，只需要给出现情况的元素加上下面的样式就能解决问题了。
代码如下：-webkit-tap-highlight-color: rgba(0,0,0,0);这是ios设备特有的样式，原理是去掉ios背面的颜色。
备注：transparent的属性值在android下无效。
2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。
3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅（这个属性会调用硬件加速模式，无需通过JS引擎，直接浏览器内核渲染），但是在android下不可乱用，很多见所未见的bug就是因为这个。
4、@-webkit-keyframes可以预定义很多你所想到的动画，然后通过-webkit-transition来调用。
5、-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size，所以有必要两个都要写上；用这个属性的时候推荐用cover这个值，可以自动去匹配宽和高。
6、border-radius、box-shadow、gradient、border-image，不解释，可以精简代码。
7、android、ios4及以下，固定宽/高块级元素的overflow:scroll/auto失效，属于浏览器的bug，可借助第三方工具实现。
8、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。
9、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。
10、如果涉及较多域外链接，DNS Prefetching可以帮你做DNS预解析。
11、如果你希望你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。
12、当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡。
13、IOS禁止横竖屏时字体变大，-webkit-text-size-adjust: none;
14、iphone的Retina显示屏的css中的数值都得翻倍，包括图片大小也得翻倍，Retina显示屏精致，可以简单理解为Retina显示屏上的1像素相当于普通的2像素。
15、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；
16、触摸事件用touch系列，不要用click替代；
17、在处理IOS设备web页面的时候常常会遇到这样的问题，当我点击摸个元素时，点击区域会出现闪一下的情况。解决方法其实很简单，只需要给出现情况的元素加上下面的样式就能解决问题了。
代码如下：-webkit-tap-highlight-color: rgba(0,0,0,0);这是ios设备特有的样式，原理是去掉ios背面的颜色。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
