移动端的一些常见的兼容问题

今天我总结了一下自己在做移动端项目时遇到过得一些常见的兼容问题。这些问题我会定时更新。
话不多说直接上问题。

一、移动端共有的一些注意事项

1. 在写手机端时必要需要加入meta

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
// （width=device-width），
//  初始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
//  minimum-scale=1, maximum-scale=1 最大（最小）缩放比例
//  user-scalable 是否允许用户缩放。

2.删除默认的苹果工具栏和菜单栏

<meta name="apple-mobile-web-app-capable" content="yes">

3.在web app应用下状态条（屏幕顶部条）的颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

4.禁止了把数字转化为拨号链接

 <meta name="format-detection" content="telephone=no">

5.浏览网站时的小图标

    <link rel="shortcut icon" href=" " type="/image/x-icon"> 

6.添加至主屏时的图片

<link rel="apple-touch-icon-precomposed" sizes="120x120" href=" ">

7.apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。

<meta name="apple-mobile-web-app-capable"content="yes">

// 如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

8.html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

<a href="tel:4008106999,1034"> //400-810-6999 转 1034</a>

<a href="tel:15677776767">点击拨打15677776767</a> // 拨打手机直接如下

9.设置缓存

<meta http-equiv="Cache-Control"content="no-cache"/>
//手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

10.动画定义3D启用硬件加速

Element {
      -webkit-transform:translate3d(0,0,0)
      transform: translate3d(0,0,0);
    }
    //注意：3D变形会消耗更多的内存与功耗

11.Retina屏的1px边框

Element{
  border-width:thin;
}

12.长时间按住页面出现闪退

element {

  -webkit-touch-callout:none;

}

13.提交表单默认有圆角，加入

-webkit-appearance : none;