移动端开发技巧

META 相关

1.添加到主屏后的标题（IOS）

<meta name="apple-mobile-web-app-title" content="标题">

2.启用 WebApp 全屏模式（IOS）

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

3.百度禁止转码。通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个 meta 标签来禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

4.设置状态栏的背景颜色（IOS）设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    default ：状态栏背景是白色。
    black ：状态栏背景是黑色。
    black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

5.开启短信功能：

<a href="sms:123456">123456</a>

6.移动端邮箱识别（Android）
与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

<meta content="email=no" name="format-detection" />

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

viewport 模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable"> <!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的 safari -->
        <meta content="black" name="apple-mobile-web-app-status-bar-style"> <!-- 将网站添加到主屏幕快速启动方式，仅针对 ios 的 safari 顶端状态条的样式 -->
        <meta content="telephone=no" name="format-detection"> <!-- 禁止将页面中的数字识别为电话号码 -->
        <meta content="email=no" name="format-detection"> <!-- 忽略 Android 平台中对邮箱地址的识别 -->
        <title>标题</title>
        <link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon"> <!-- 自定义 favicon -->
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        这里开始内容
    </body>
</html>

CSS相关

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/
}

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

html, body {
    -webkit-user-select: none; /*禁止选中文本*/
    user-select: none;
}

button,input,optgroup,select,textarea {
    -webkit-appearance:none; /*去掉webkit默认的表单样式*/
}

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

input::-webkit-input-placeholder {
    color:#ccc; /*修改webkit中input的planceholder样式*/
}

input:focus::-webkit-input-placeholder {
    color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
}

body {
    -webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/
}

input::-webkit-input-speech-button {
    display: none; /*隐藏Android的语音输入按钮*/
}

三大手机系统的字体

1.ios 系统

默认中文字体是 Heiti SC
默认英文字体是 Helvetica
默认数字字体是 HelveticaNeue
无微软雅黑字体

2.android 系统

默认中文字体是 Droidsansfallback
默认英文和数字字体是 Droid Sans
无微软雅黑字体

3.winphone 系统

默认中文字体是 Dengxian (方正等线体)
默认英文和数字字体是 Segoe
无微软雅黑字体
各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

移动端字体单位 font-size 选择 px 还是 rem 对于只需要适配手机设备，使用 px 即可对于需要适配各种移动设备，使用 rem，例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备 rem 配置参考：

html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
    html {
        font-size: 15px
    }
}
@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

移动端 touch 事件（区分 webkit 和 winphone ）

当用户手指放在移动设备在屏幕上滑动会触发的 touch 事件

以下支持 webkit
touchstart—— 当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove—— 当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用 event 的 preventDefault() 可以阻止默认情况的发生：阻止页面滚动
touchend—— 当手指离开屏幕时触发
touchcancel—— 系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
以下支持 winphone 8
MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用 css 的 html{-ms-touch-action: none;} 可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发

移动端 click 屏幕产生 200-300 ms 的延迟响应移动设备上的 web 网页是有 300ms 延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

解决延迟方案：

fastclick 可以解决在手机上点击事件的 300ms 延迟
zepto 的 touch 模块，tap 事件也是为了解决在 click 的延迟问题
触摸事件的响应顺序
```
ontouchstart --> ontouchmove --> ontouchend --> onclick
```
解决300ms延迟的问题，也可以通过绑定 ontouchstart 事件，加快对事件的响应。

ios 系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios 用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置 -webkit-tap-highlight-color 的 alpha 值为 0，也就是属性值的最后一位设置为 0 就可以去除半透灰色遮罩

a, button, input, textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

部分 android 系统中元素被点击时产生的边框怎么去掉 android 用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置 -webkit-tap-highlight-color 的 alpha 值为 0 去除部分机器自带效果

a, button, input, textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-user-modify:read-write-plaintext-only; 
}

禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {
    -webkit-text-size-adjust: 100%;
}

屏幕旋转的事件和样式

事件：
window.orientation，取值：正负 90 表示横屏模式、0 和 180 表现为竖屏模式；

window.onorientationchange = function() {
    switch(window.orientation){
        case -90:
        case 90:
            alert("横屏:" + window.orientation);
        case 0:
        case 180:
            alert("竖屏:" + window.orientation);
            break;
    }
}

样式：

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

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

屏幕旋转为横屏时，字体大小会变

具体出现的情况不明😒，有时候有有时候没有，欢迎指出。

优化代码：

* {
  -webkit-text-size-adjust: 100%;
}

手机拍照和上传图片

<input type="file"> 的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
<!-- 多选 -->
<input type="file" multiple>

消除transition闪屏

.css{
    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
    -webkit-backface-visibility: hidden;
}

开启硬件加速
解决页面闪白
保证动画流畅

.css {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

弹出数字键盘

<!-- 有"#" "*"符号输入 -->
<input type="tel">

<!-- 纯数字 -->
<input pattern="\d*">

android 跟 IOS的表现形式应该不一样，大家可以自己试试。当运用了正则 pattern 后，就不用关注 input 的类型了。

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

解决input失焦后页面没有回弹

一般出现在IOS设备中的微信内部浏览器，出现的条件为：

页面高度过小
聚焦时，页面需要往上移动的时候

所以一般 input 在页面上方或者顶部都不会出现无法回弹🤣

解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：

<template>
  <input type="text" @focus="focus" @blur="blur">
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0
      }
    },

    methods: {
      focus() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },

      blur() {
        document.scrollingElement.scrollTo(0, this.scrollTop);
      }
    }
  }
</script>

浏览器点击行为

<!-- 拨号 -->
<a href="tel:10086">打电话给: 10086</a>

<!-- 发送短信 -->
<a href="sms:10086">发短信给: 10086</a>

<!-- 发送邮件 -->
<a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a>

打开原生应用

<a href="weixin://">打开微信</a>
<a href="alipays://">打开支付宝</a>
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

这种方式叫做 URL Scheme，是一种协议，一般用来访问APP或者APP中的某个功能/页面（如唤醒 APP 后打开指定页面或者使用某些功能）

URL Scheme 的基本格式如下：

     行为(应用的某个功能/页面)    
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数

一般是由APP开发者自己定义，比如规定一些参数或者路径让其他开发者来访问

注意事项：

唤醒APP的条件是你的手机已经安装了该APP
某些浏览器会禁用此协议，比如微信内部浏览器（除非开了白名单）

解决 active 伪类失效

<body ontouchstart></body>

给 body 注册一个空事件即可

禁止长按

每个手机以及浏览器的表现形式不一样，可以总结成这几个：长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单。

想要禁止这些浏览器的默认行为，可以使用以下 CSS：

// 禁止长按图片保存
img {
  -webkit-touch-callout: none;
  pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可
}

// 禁止长按选择文字
div {
  -webkit-user-select: none;
}

// 禁止长按呼出菜单
div {
  -webkit-touch-callout: none;
}

滑动不顺畅，粘手

一般出现在IOS设备中，自定义盒子使用了 overflow: auto || scroll 后出现的情况。

优化代码：

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

最简单的rem自适应

大家都知道，rem的值是根据根元素的字体大小相对计算的，但是我们每个设备的大小不一样，所以根元素的字体大小要动态设置

html {
 font-size: calc(100vw / 3.75);
}

body {
  font-size: .14rem;
}

或者直接使用 lib-flexible、postcss-pxtorem 。

自定义苹果图标

在网站文件根目录放一个 apple-touch-icon.png 文件，苹果设备保存网站为书签或桌面快捷方式时，就会使用这个文件作为图标，文件尺寸建议为：180px × 180px。

自定义favicon

<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">

参考：

稍微整理了几个经常在H5移动端开发遇到的东西😢

移动端开发技巧

移动WEB前端开发资源整合

移动端h5开发总结不断更新中….