移动端h5页面问题总结-CFANZ编程社区

1.html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
<a rel="nofollow" href="tel:4008106999,1034">400-810-6999 转 1034</a>
<a rel="nofollow" href="tel:15677776767">点击拨打15677776767</a>

2.html5GPS定位功能
具体请看：http://www.haorooms.com/post/html5_GPS_getCurrentPosition

3.上下拉动滚动条时卡顿、慢
 body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

4.禁止复制、选中文本
Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     user-select: none;
}

5.动画定义3D启用硬件加速
Element {
    -webkit-transform:translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0);
}

6.Retina屏的1px边框
Element{
    border-width: thin;
}
7.浏览器私有及其它meta
以下属性在项目中没有应用过 全屏模式 <meta name="x5-fullscreen" content="true"> 强制竖屏 <meta name="x5-orientation" content="portrait"> 强制横屏 <meta name="x5-orientation" content="landscape"> 应用模式 <meta name="x5-page-mode" content="app"> UC浏览器私有 全屏模式 <meta name="full-screen" content="yes"> 强制竖屏 <meta name="screen-orientation" content="portrait"> 强制横屏 <meta name="screen-orientation" content="landscape"> 应用模式 <meta name="browsermode" content="application"> 其它 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta name="HandheldFriendly" content="true"> 微软的老式浏览器 <meta name="MobileOptimized" content="320"> windows phone 点击无高光 <meta name="msapplication-tap-highlight" content="no">

8.防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport
使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

9. 安卓浏览器看背景图片，有些设备会模糊。
用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。 想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。 代码可以如下：
 background:url(../images/icon/all.png) no-repeat center center;
 -webkit-background-size:50px 50px;
 background-size: 50px 50px;display:inline-block; width:100%; height:50px;   
或者指定 background-size:contain;都可以，大家试试！