如何在iOS Safari/Android Chrome禁止手势缩放、阻止下拉刷新、阻止滑动前进后退

本文代码主要源自我在 StackOverflow Disable pull-to-refresh in iOS 15 Safari 的回答，难点在于

1. 同时兼容iOS Safari和Android Chrome
2. 足够标准不至于过段时间就不适用
3. 副作用小不至于让开发者左右两难

如何阻止下拉刷新

/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none))  {
    html {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
  }
}
/* prevent pull-to-refresh for Chrome 63+ */
body{
  overscroll-behavior-y: none;
}

如何阻止前进后退手势

/* currently there is NO SIMPLE WAY to prevent BackForwardNavigationGestures for Safari */

/* prevent "overscroll history navigation" for Chrome 63+ */
body{
  overscroll-behavior-x: none;
}

如何禁止手势缩放

/* prevent pinch-zoom for Chrome 36+, Safari 13+ */
html {
  touch-action: pan-x pan-y;
  min-height: 100%; /* for Safari */
}

// prevent pinch-zoom for iOS Safari 9~12
if (window.GestureEvent && !('touchAction' in document.documentElement.style)) {
  document.documentElement.addEventListener('gesturestart', (e)=>{e.preventDefault()}, {passive: false, capture:true});
}

<!-- prevent pinch-zoom for Chrome, old Safari -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

如何禁止双击缩放

if (window.GestureEvent || (navigator.maxTouchPoints & 0xFF) > 0) {
  document.body.addEventListener('click', (e) => {
    if (!isInteractiveElement(e.target))
      e.preventDefault();
  });
}

function isInteractiveElement(e) {
  let {nodeName} = e;
  if (nodeName === 'A' && e.hasAttribute('href') ||
    ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(nodeName) && !e.disabled ||
    nodeName === 'LABEL' && (e.htmlFor || e.querySelector('input,select,textarea') !== null) ||
    ['IMG', 'OBJECT'].includes(nodeName) && e.useMap ||
    ['AUDIO', 'VIDEO'].includes(nodeName) && e.controls ||
    ['SUMMARY', 'IFRAME', 'EMBED'].includes(nodeName)) {
    return true;
  }
  return e.hasAttribute('tabindex') && e.tabIndex > -1;
}

禁止iOS Safari其他默认行为

禁止长按选中文本

-webkit-user-select: none;

禁止长按弹出上下文菜单

-webkit-touch-callout: none;

禁止按钮/链接点击特效

-webkit-tap-highlight-color: transparent;

禁止长按弹出上下文菜单

-webkit-touch-callout: none;

禁止视频弹出悬浮窗口

<video playsinline></video>