移动端开发适配和注意点

1.防止手机中网页放大和缩小。

这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport

为了更好的兼容，我们会使用完整的viewport设置。代码如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

然后在App.vue里面写上如下代码：

  mounted() {
    document.documentElement.addEventListener(
      "touchstart",
      function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      },
      { passive: false }
    );
    // 禁止双击放大
    let lastTouchEnd = 0;
    document.documentElement.addEventListener(
      "touchend",
      function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      },
      { passive: false }
    );
  },

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

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。代码如下：

<a href="tel:10010">10010</a>

3.上下拉动滚动条时卡顿、慢

body {

 -webkit-overflow-scrolling: touch;

 overflow-scrolling: touch;

}

4.启动动画

<link rel="apple-touch-startup-image" href="launch.png"/>

iOS下页面启动加载时显示的画面图片，避免加载时的白屏。

可以通过madia来指定不同的大小：

<!--iPhone-->

<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

 

<!-- iPhone Retina -->

<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

 

<!-- iPhone 5 -->

<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

 

<!-- iPad portrait -->

<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

 

<!-- iPad landscape -->

<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

 

<!-- iPad Retina portrait -->

<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

 

<!-- iPad Retina landscape -->

<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

5.浏览器私有及其它meta

<!-- QQ浏览器私有 -->

<!-- 全屏模式 -->

<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">