Html 移动web开发细节处理

一、-webkit-tap-highlight-color:rgba(255,255,255,0)能够同时屏蔽ios和android下点击元素时出现的阴影。
备注：transparent的属性值在android下无效。

二、-webkit-appearance:none能够同时屏蔽输入框怪异的内阴影，解决iOS下没法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认仍是带有圆角的，不过可使用 border-radius属性修改。

三、-webkit-transform:translate3d(0, 0, 0)在ios下可让动画更加流畅（这个属性会调用硬件加速模式，无需经过JS引擎，直接浏览器内核渲染），可是在android下不可乱用，不少见所未见的bug就是由于这个。

四、-webkit-background-size能够作高清图标，不过一些低版本的android只能识别background-size，因此有必要两个都要写上。

五、ios5+能够经过scrollTo(0,0)来自动隐藏浏览器地址栏。

六、css3动画会影响你的自动聚焦，因此自动聚焦要在动画执行以前来作，或者直接舍弃。

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

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

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

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

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

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

九、若是涉及较多域外连接，DNS Prefetching能够帮你作DNS预解析。

 

十、若是你但愿你的站点更多地在SNS上传播，那么Open Graph Protocol会比较适合你。

十一、当用iScroll时候，不能使用:focus{outline:0}伪类，不然滑动会卡。

十二、视频全屏播放

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

1三、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d；

1四、触摸事件用touch系列，不要用click替代；

 

1五、滚动条滚动时没有像ios原生那么顺滑流畅，没有回弹效果

{overflow:auto;-webkit-overflow-scrolling:touch;}

1六、在处理IOS设备web页面的时候经常会遇到这样的问题，当我点击摸个元素时，点击区域会出现闪一下的状况。解决方法其实很简单，只须要给出现状况的元素加上下面的样式就能解决问题了。
       代码以下：-webkit-tap-highlight-color: rgba(0,0,0,0);这是ios设备特有的样式，原理是去掉ios背面的颜色。

 

1七、改变input默认提示placeholder的样式：

::-webkit-input-placeholder{font-size: 0.24rem;color: #545454;line-h/ight: 0.4rem}

聚焦时不自动消失：

input:focus::-webkit-input-placeholder{

     opacity: 0;

}

 

1八、移除 input type="number" 时浏览器自带的上下箭头：

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

     -webkit-appearance: none !important;

     margin: 0;

}

 

1九、页面发短信 打电话 发邮件

打电话

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

发短信，winphone系统无效

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

写邮件

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