触摸大屏页面显示问题汇总

最近写了一个页面显示在一个触摸大屏上面，主要遇到了下面几个问题：

1. 页面中引入了swiper库，在本地电脑调试左右滑动没问题，但是在屏幕上滑动不流畅，效果很差。

解决：触控屏上面swiper库在处理触摸滑动有问题

let mySwiper = new Swiper(".swiper-container", {
    //增加simulateTouch配置参数
	simulateTouch: !this.touchCapable(),
}

// 检测设备是否支持触摸
  touchCapable = () => {
    return (
      "ontouchstart" in window ||
      (window.DocumentTouch && document instanceof window.DocumentTouch) ||
      navigator.maxTouchPoints > 0 ||
      window.navigator.msMaxTouchPoints > 0
    );
  };

2. 大屏左右滑动页面晃动，左右会出现空白

html, body { height: 100vh; overflow-x: hidden;}

3. 左右滑动时会触发浏览器的默认行为可能会打开前面或者后面的浏览器页面

html, body {overscroll-behavior: none;}