0.禁用橡皮筋效果

    1. npm install inobounce --save
    3. https://www.npmjs.com/package/inobounce

    1.禁止页面上下拉动(橡皮筋效果)

    1. //禁止页面上拉下拉
    2. document.body.addEventListener(
    3.   'touchmove',
    4.   function(e) {
    5.     e.preventDefault() //阻止默认的处理方式
    6.   },
    7.   { passive: false }
    8. ) //passive 参数不能省略，用来兼容 ios 和 android 3.禁止页面上下拉，但不影响页面内部 scroll

    :::info 第 2 点的代码会影响页面内部的 scroll，用之前的项目测试了一下，确实如此。
    但如果去掉第 2 点的代码，虽然内部的 scroll 可以正常使用了，但橡皮筋的效果出现了。 ::: 2.禁止页面上下拉(橡皮筋效果),但不影响页面内部 scroll

    1. var overscroll = function(el) {
    2.   //el需要滑动的元素
    3.   el.addEventListener('touchstart', function() {
    4.     var top = el.scrollTop,
    5.       totalScroll = el.scrollHeight,
    6.       currentScroll = top + el.offsetHeight
    7.     //被滑动到最上方和最下方的时候
    8.     if (top === 0) {
    9.       el.scrollTop = 1 //0～1之间的小数会被当成0
    10.     } else if (currentScroll === totalScroll) {
    11.       el.scrollTop = top - 1
    12.     }
    13.   })
    14.   el.addEventListener('touchmove', function(evt) {
    15.     if (el.offsetHeight < el.scrollHeight) evt._isScroller = true
    16.   })
    17. }
    18. overscroll(document.querySelector('.aaaa')) //允许滚动的区域
    19. document.body.addEventListener(
    20.   'touchmove',
    21.   function(evt) {
    22.     if (!evt._isScroller) {
    23.       evt.preventDefault() //阻止默认事件(上下滑动)
    24.     }
    25.   },
    26.   { passive: false } //这行依旧不可以省略，用于兼容ios
    27. )

    3.微信端禁止页面分享

    1. // 隐藏微信分享菜单，当点击右上角时不会出现分享的选项
    2. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    3.   WeixinJSBridge.call('hideOptionMenu')
    4. })

    4.禁止微信浏览器图片长按出现菜单(适用于微信 6.0 以上版本)
    网上挺多代码无效，下面亲测有效（兼容 ios 与 android）

    1. img {
    2.   pointer-events: none;
    3.   -webkit-pointer-events: none;
    4.   -ms-pointer-events: none;
    5.   -moz-pointer-events: none;
    6. }

    :::info 如果是微信 6.0 以下的版本，则第 3 , 4 点一句 -webkit-touch-callout: none 即可解决的出现菜单和“显示在浏览器打开“的问题，当然最好都加上就完美了 :::

    5.禁止微信浏览器长按“显示在浏览器打开”(适用于微信 6.0 以上版本)

    1. document.oncontextmenu = function(e) {
    2.   e.preventDefault()
    3. }

    6.禁止复制文本

    1. -webkit-user-select: none;
    2. user-select: none;
    3. -webkit-touch-callout: none;

    7.禁止浏览器调整字体大小

    1. /* ios 解决方案 */
    2. body {
    3.   -webkit-text-size-adjust: 100% !important;
    4.   text-size-adjust: 100% !important;
    5.   -moz-text-size-adjust: 100% !important;
    6. }
    1. // android 解决方案（用自执行函数强制禁止用户修改字体大小）
    2. ;(function() {
    3.   if (
    4.     typeof WeixinJSBridge == 'object' &&
    5.     typeof WeixinJSBridge.invoke == 'function'
    6.   ) {
    7.     handleFontSize()
    8.   } else {
    9.     if (document.addEventListener) {
    10.       document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
    11.     } else if (document.attachEvent) {
    12.       document.attachEvent('WeixinJSBridgeReady', handleFontSize)
    13.       document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
    14.     }
    15.   }
    17.   function handleFontSize() {
    18.     // 设置字体为默认大小并且重写事件
    19.     WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
    20.     WeixinJSBridge.on('menu:setfont', function() {
    21.       WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
    22.     })
    23.   }
    24. })()

    8.移动端伪类:active 无效的解决方法 - IOS 问题 :::info [1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the .

    需要在按钮元素或者 body/html 上绑定一个 touchstart 事件才能激活:active 状态。 :::

    1. document.body.addEventListener('touchstart', function() {}) //...空函数即可