h5移动端常见的问题及解决方案

解决问题

1. ios端兼容input高度，
2. ios上下滑动页面卡顿，页面缺失，
3. input输入框在iOS中获取到焦点之后界面上移无法回落问题，
4. 界面点反应慢、延时问题解决方案，
5. new Date()转换时间在iOS中不生效问题，
6. 关于部分拷贝方法在iOS中不生效问题，
7. android弹出的键盘遮挡输入框、
8. iOS上拉边界下拉出现白色空白
9. window.open IOS无法打开问题

01、ios端兼容input高度

#问题描述

　　input输入框光标，光标的高度和父盒子的高度一样,而android手机没问题

　　android　　

　　　　

　　ios

　 　　

#产生原因

　　通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高)，当点击输入的时候，光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部

#解决

padding　　去替换　　line-height

.content {
  box-sizing: border-box;
  height: 88px;
  .content-input {
    display: block;//块元素
    box-sizing: border-box;//怪异盒模型
    width: 100%;
    font-size: 28px;
    //line-height: 88px;
    padding: 30px 0;
  }
}

02、ios上下滑动页面卡顿，页面缺失

#问题描述

　　在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。

#产生原因

 　　微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。

　　原来在iOS5.0以及之后的版本,滑动有定义两个值auto和touch,默认值为auto.
　　　　-webkit-overflow-scrolling:touch; 当手指从触摸屏上移开,会保持一段时间的滚动.
　　　　-webkit-overflow-scrolling:auto; 当手指从触摸屏上移开,滚动会立即停止.

#解决

　方案一

在需要滑动的位置加上如下css代码：

overflow:scroll;
-webkit-overflow-scrolling:touch;

#存在问题

1、在滑动界面之中使用的position：fixed 无法固定下来，会随着界面进行一起滚动

　　解决方法：将使用的position：fixed(头部导航)写在滑动部位外部，在使用绝对定位进行布局，以此解决问题

2、vue中使用v-if导致的界面初始化之后无法滑动

　　解决方法：将v-if改成v-show进行展示，解决界面进入之后第一次不能滑动的问题

#扩展

　　-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文

03、input输入框在iOS中获取到焦点之后界面上移无法回落问题

#问题描述

　　输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑

#产生原因

　　固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 。

#解决

 <input
      class="content-input"
      placeholder="请输入姓名"
      v-model="peopleList.name"
      @blur.prevent="changeBlur()"
    />

changeBlur(){
  let u = navigator.userAgent, app = navigator.appVersion;
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if(isIOS){
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 200)
  }
}

#扩展

• prevent：　　 　　阻止默认事件
• blur:　　　　　　　 失去焦点
• position:fixed　　的元素在ios里，收起键盘的时候会被顶上去，特别是第三方键盘

04、界面点反应慢、延时问题解决方案

#产生原因

　　iOS嵌套界面之后，界面点击效果会自动产生一个300毫秒的延时

#解决

1、下载fastclick
　　npm i -S fastclick
2、引入
　　 FastClick.attach(document.body);

#存在问题

　　引入fastclick之后，会有一个副作用：input输入框需要连续点击两次或者长按才能获取焦点

|解决

　　再引入fastClick的js中加入如下代码即可解决input输入框点击不能获取焦点的问题

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.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
}
};

05、new Date()转换时间在iOS中不生效问题

#产生原因

　　前端界面使用new Date('2021-3-14 23:59:59').getTime()，iOS不解析。

#解决

　　换用其他格式：new Date('2021-3-14T23:59:59').getTime()

06、关于部分拷贝方法在iOS中不生效问题

#解决

　　前端有时候需要用到拷贝部分内容到剪切板中，但是在使用时发现，部分网上提供的拷贝方法在Android中正常使用，但是在iOS中无法进行拷贝，经过试验发现一种通用的拷贝方法，如下：

/**

* 将内容拷贝到剪切板中

*/

function copyContent(message) {

　　 // text: 要复制的内容， callback: 回调

  var input = document.createElement("input");

  input.value = message;

  document.body.appendChild(input);

  input.select();

  input.setSelectionRange(0, input.value.length);

  document.execCommand('Copy');

  document.body.removeChild(input);

}

07、android弹出的键盘遮挡输入框

#解决

　　给input和textarea标签添加focus事件

　　先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了

changefocus(){
  let u = navigator.userAgent, app = navigator.appVersion;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  if(isAndroid){
    setTimeout(function() {
      document.activeElement.scrollIntoViewIfNeeded();
      document.activeElement.scrollIntoView();
    }, 500);       
  }
},

 08、iOS上拉边界下拉出现白色空白

#问题描述

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

#产生原因

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

#解决

<template>
  <div id="app" @touchmove="handleTouch">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
    created () {
        document.body.addEventListener('touchmove', (e) => {
          if (e._isScroller) return;
          e.preventDefault()
        }, {
          passive: false
        })
  },
  methods: {
    handleTouch (e) {
      e._isScroller = true
    }
  }
}
</script>
<style>
html,body {
  height: 100%;
  overflow: hidden;
}
#app {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
<style>

 09、iOS window.open无法打开页面

 　　在ajax回调里面拿到即将要跳转的链接url，使用window.open(linkUrl),没有起作用，而且代码也没有报错，查找原因是：大部分现代的浏览器(Chome/Firefox/IE 10+/Safari)都默认开启了组织弹出窗口的策略，原因是window.open被广告商所滥用，严重影响用户的使用。

这个组织弹出窗口的操作，并不是直接封杀window.open()，而是根据用户的行为来判定这次操作是不是属于流氓操作。如果是用户自己的动作触发的window.open就不会被阻止，比如写在onclick事件中，但如果是代码自动触发就会被组织的。

Safari中无法open新窗口，原因是Safari的安全机制将其阻止，一些异步操作，比如ajax回调里面执行window.open就会失效，原因是代码自己自动执行的，被IOS的安全机制拦截！

解决方法：

使用window.location.href = linkUrl;【或者使用window.location.replace()来替代当前的url】;

网上的在回调之前开个空窗口，然后再修改其location指向，该方法试过无用，只是开了个新窗口；