移动端 常见问题 阅读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 安装后使用
- 原生js
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
- jquery
$(function() {
FastClick.attach(document.body);
});
同样，使用fastclick库后，click 延时和穿透问题都没了
软键盘将页面顶起来、收起未回落问题
表现：Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。移开焦点时，键盘收起，键盘区域空白，未回落。
答：
- 记录高度与重置高度
// 记录原有的视口高度
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
