总结移动端H5开发经常使用技巧（干货满满哦！）

时间  2020-02-19
标签 总结 移动 h5 开发 经常 使用 技巧 干货 满满 栏目 无线 繁體版
原文   原文链接

前言

年后第一天到公司上班，整理一些在移动端H5开发常见的问题给你们作下分享，这里不少是本身在开发过程当中遇到的大坑或者遭到过吐糟的问题，但愿能给你们带来或多或少的帮助，喜欢的大佬们能够给个小赞，若是有问题也能够一块儿讨论下。css

下面是最近一个月整理的JS基础总结，可供你们温故而知新。html

本人github: github.com/Michael-lzg前端

开箱即用的JS干货助力金三银四
JS基础总结（1）——数据类型
JS基础总结（2）——原型与原型链
JS基础总结（3）——做用域和闭包
JS基础总结（4）——this指向及call/apply/bind
JS基础总结（5）—— JS执行机制与EventLoopdvue

html 篇

经常使用的meta属性设置

meta对于移动端的一些特殊属性，可根据须要自行设置android

<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
<meta name="full-screen" content="yes">             //全屏显示
<meta name="browsermode" content="application">     //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="x5-orientation" content="portrait">     //QQ强制竖屏
<meta name="x5-fullscreen" content="true">          //QQ强制全屏
<meta name="x5-page-mode" content="app">            //QQ应用模式

电话号码识别

在 iOS Safari （其余浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话连接，好比：webpack

  • 7 位数字，形如：1234567
  • 带括号及加号的数字，形如：(+86)123456789
  • 双链接线的数字，形如：00-00-00111
  • 11 位数字，形如：13800138000

关闭识别ios

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

开启识别git

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

邮箱识别（Android）

安卓上会对符合邮箱格式的字符串进行识别，咱们能够经过以下的 meta 来管别邮箱的自动识别：github

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

一样地，咱们也能够经过标签属性来开启长按邮箱地址弹出邮件发送的功能：web

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

css 篇

0.5px细线

移动端 H5 项目愈来愈多，设计师对于 UI 的要求也愈来愈高，好比 1px 的边框。在高清屏下，移动端的 1px 会很粗。

那么为何会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的状况下，设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来讲，设备的物理像素要实现 1 像素，而 DPR=2，因此 css 像素只能是 0.5。

下面介绍最经常使用的方法

/* 底边框 */
.b-border {
  position: relative;
}
.b-border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 上边框 */
.t-border {
  position: relative;
}
.t-border:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 右边框 */
.r-border {
  position: relative;
}
.r-border:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 左边框 */
.l-border {
  position: relative;
}
.l-border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/* 四条边 */
.setBorderAll {
  position: relative;
  &:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }
}

屏蔽用户选择

禁止用户选择页面中的文字或者图片

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

清除输入框内阴影

在 iOS 上，输入框默认有内部阴影,以这样关闭：

div {
  -webkit-appearance: none;
}

如何禁止保存或拷贝图像

代码以下

img {
  -webkit-touch-callout: none;
}

输入框默认字体颜色

设置 input 里面 placeholder 字体的颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

用户设置字号放大或者缩小致使页面布局错误

设置字体禁止缩放

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

android系统中元素被点击时产生边框

部分android系统点击一个连接，会出现一个边框或者半透明灰色遮罩, 不一样生产商定义出来额效果不同。去除代码以下

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

iOS 滑动不流畅

ios 手机上下滑动页面会产生卡顿，手指离开页面，页面当即中止运动。总体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及以后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决方案

  1. 在滚动容器上增长滚动 touch 方法
.wrapper {
  -webkit-overflow-scrolling: touch;
}
  1. 设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}

js 篇

移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，每每会形成按钮点击延迟甚至是点击失效。解决方案：

  • fastclick能够解决在手机上点击事件的300ms延迟
  • zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

  1. ontouchstart
  2. ontouchmove
  3. ontouchend
  4. onclick

audio 和 video 在 ios 和 andriod 中自动播放

这个不是bug，因为自动播放网页中的音频或视频，会给用户带来一些困扰或者没必要要的流量消耗，因此苹果系统和安卓系统一般都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才能够播放。加入自动触发播放的代码

$('html').one('touchstart', function() {
  audio.play()
})

iOS 上拉边界下拉出现空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器天然会被拖动，剩下的部分会成空白。

解决方案

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

ios 日期转换 NAN 的问题

将日期字符串的格式符号替换成'/'

'yyyy-MM-dd'.replace(/-/g, '/')

软键盘问题

IOS 键盘弹起挡住原来的视图

  • 能够经过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 若是该元素已经在浏览器窗口的可见区域内，则不会发生滚动。
  • true，则元素将在其所在滚动区的可视区域中居中对齐。
  • false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪一个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。
window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})

onkeyUp 和 onKeydown 兼容性问题

IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，可是在 ios 手机浏览器中用输入法输入以后，并未马上相应 keyup 事件

IOS12 输入框难以点击获取焦点，弹不出软键盘

定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 作如下修改

FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date') !== 0 &&
    targetElement.type !== 'time' &&
    targetElement.type !== 'month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

IOS 键盘收起时页面没用回落，底部会留白

经过监听键盘回落时间滚动到原来的位置

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

IOS 下 fixed 失效的缘由

软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，因此当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不只限于 type=text 的输入框，凡是软键盘（好比时间日期选择、select 选择等等）被唤起，都会遇到一样地问题。

解决方法: 不让页面滚动，而是让主体部分本身滚动,主体部分高度设为 100%，overflow:scroll

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>
.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

推荐文章

从零开始构建一个webpack项目
总结几个webpack打包优化的方法
总结前端性能优化的方法
几种常见的JS递归算法
搭建一个vue-cli的移动端H5开发模板
封装一个toast和dialog组件并发布到npm
一文读尽前端路由、后端路由、单页面应用、多页面应用
关于几个移动端软键盘的坑及其解决方案
浅谈JavaScript的防抖与节流

关注的个人公众号不按期分享前端知识，与您一块儿进步！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程