Html 移动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，所以有必要两个都要写上。

5、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

6、css3动画会影响你的自动聚焦，所以自动聚焦要在动画执行之前来做，或者直接舍弃。

7、//竖屏时使用的样式

@media all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式

@media all and (orientation:landscape) {
.css{}
}

8、audio和video无法自动播放的问题，微信内置浏览器已解决此问题：

$(‘html‘).one(‘touchstart‘,function(){

    audio.play()
})//必须有交互动作才会触发

//x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://">>

//href="tel:1857777777">打电话给:1857777777>

//href="sms:10086">发短信给: 10086>

//href="mailto:123@qq.com">123@qq.com>

Html 移动web开发细节处理

标签：

原文地址：http://www.cnblogs.com/hunters/p/5660546.html