移动端 常见问题 阅读1

摘自 前端大学

iOS 滑动不流畅

答：
在 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 /
-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立即停止 */

将-webkit-overflow-scrolling 值设置为 touch

.wrapper {
    -webkit-overflow-scrolling: touch;
}

iOS 上拉边界下拉出现白色空白
表现： 手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

答：阻止默认行为，但是排除需要滚动的区域

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

页面放大或缩小不确定性行为

答：

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

click 点击事件延时与穿透
表现： 两个层叠加，上面有触摸事件，下面有click事件；如果上层需要消失时候，下面会触发click事件

答：原因是 iOS 中的 safari 300ms机制，小于300ms连续点击为双击行为，大于300ms再做操作，则判断为点击行为
如果存在事件叠加的情况下，上层消失，下面会触发touchend则会判断为click
解决方法：
都使用touch操作

el.addEventListener("touchstart", () => { console.log("ok"); }, false);

由此引发的问题，为什么移动端touchstart与click要并存与移动端呢？
因为如果滚动的内容中，存在需要点击触发的内容，则需要使用click，而不是都用touchstart
否则，需要点击的事件与touchstart滑动会产生冲突

也可以安装 fastclick 第三方模块
使用 npm/yarn 安装后使用

1. 原生js

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

2. jquery

$(function() {
    FastClick.attach(document.body);
});

同样，使用fastclick库后，click 延时和穿透问题都没了

软键盘将页面顶起来、收起未回落问题
表现：Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。

答：

1. 记录高度与重置高度

// 记录原有的视口高度
const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;

window.onresize = function(){
  var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  if(resizeHeight < originalHeight ){
    // 恢复内容区域高度
    // const container = document.getElementById("container")
    // 例如 container.style.height = originalHeight;
  }
}

实际使用中需要判断终端系统与平台

const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!isWechat) return;
const wechatVersion = wechatInfo[1];
const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
 
 // 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口
if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
  window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
}

window.scrollTo(x-coord, y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口

2.输入框获得焦点时候，页面打开滚动条；当页面中输入框失去焦点时候，使页面回复原来的高度

iPhone X系列安全区域适配问题
表现：头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。

方案：设置安全区域，填充危险区域，危险区域不做操作和内容展示。
viewport-fit 有 3 个值分别为：

• auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。
• contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。
• cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">

增加适配：

/* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)){
  body,
  .header{
      padding-top: constant(safe-area-inset-top, 40px);
      padding-top: env(safe-area-inset-top, 40px);
      padding-top: var(safe-area-inset-top, 40px);
  }
}
/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .footer{
        padding-bottom: constant(safe-area-inset-bottom, 20px);
        padding-bottom: env(safe-area-inset-bottom, 20px);
        padding-top: var(safe-area-inset-bottom, 20px);
    }
}

页面生成为图片

import html2canvas from 'html2canvas';

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

但是不单单在此处就完了，由于是 canvas 的原因。移动端生成出来的图片比较模糊。
使用一个新的 canvas 方法多倍生成，放入一倍容器里面，达到更加清晰的效果，通过超链接下载图片

const scaleSize = 2;
const newCanvas = document.createElement("canvas");
const target = document.querySelector('div');
const width = parseInt(window.getComputedStyle(target).width);
const height = parseInt(window.getComputedStyle(target).height);
newCanvas.width = width * scaleSize;
newCanvas.height = widthh * scaleSize;
newCanvas.style.width = width + "px";
newCanvas.style.height =width + "px";
const context = newCanvas.getContext("2d");
context.scale(scaleSize, scaleSize);
html2canvas(document.querySelector('.demo'), { canvas: newCanvas }).then(function(canvas) {
  // 简单的通过超链接设置下载功能
  document.querySelector(".btn").setAttribute('href', canvas.toDataURL());
}

微信公众号分享问题

答：
以引导为主，无法直接操作SDK