Article Detail

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

阻止下拉刷新 /* prevent pull-to-refresh for Safari 16+ */ @media screen and (pointer: ...

HTML 阅读 2.6万 9 分钟阅读 2025-02-25 18:44

阻止下拉刷新

/* 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>

Comments 评论区

广西百色市 2025-02-25 18:56

js加密压缩出现bug
JavaScript代码压缩后报错

不严谨写法：

//变量定义
var time = 100
var st  = 250

//压缩后代码变成
var time = 100var st  = 250

会出现错误信息：
VM30:1 Uncaught SyntaxError: Invalid or unexpected token

正确写法：

//变量定义
var time = 100;
var st  = 250;

//压缩后代码变成
var time = 100;var st  = 250;

运行正常。

0x1、for、if 函数之间缺少“{}”符号
不严谨写法：

function demo(type,array){
    var result = "";
    if(type === 1)
        return "1"
    else if(type ===2 )
        return "1"
    else 
        if(array && array.length > 0 )
            return "array length gt 0"
        else
            return "array length = 0"
    
}

压缩后：

;function method1(type,array){var result="";if(type===1)return"1"else if(type===2)return"1"else if(array&&array.length>0)return"array length gt 0"else return"array length = 0"};

会出现报错信息：
VM401:1 Uncaught SyntaxError: Unexpected token else

正确写法：

function method1(type,array){
    var result = "";
    if(type === 1) {
        return "1";
    }else if(type ===2 ){
        return "1";
    }else{
        if(array && array.length > 0 ){
            return "array length gt 0";
        }else{
            return "array length = 0";
        }
    }
}

所以在平时写代码中，不要为了方便减少必要的“{}”、“;”符号。

0x2、xxxx is not defined 错误原因及解决方法

JavaScript 加密混淆之后运行 xxxx is not defined
Javascript 提示xxxx is not defined
0x0、xxxx is not defined 错误原因及解决方法
首先提示 xxxx is not defined 就是表示未定义

发生原因：
如果你确定加密之前已经定义了这个“变量名”或者“方法名”，那应该是加密后“变量名/方法名”已经发生改变，导致外部调用的时候找不到这个“方法名/变量名”，才会出错误。

如原来函数（方法）为：

function test(){
  //todo 
}

加密后函数（方法）可能为：

function _0xaoem(){
  //todo 
}

这个时候你去调用 “test” 那肯定是未定义（test is not defined）。

解决办法：
1.采用最牛加密V6版本，保留 “变量名/方法名” 方法。
如方法名或者变量名为 “test” ，那就这么添加即可。
这样加密后，这个“变量名/方法名”不会发生改变。就不会出现这个错误问题。

2.提升作用域。
原来函数书写：

function test(){
  //todo 
}

改成：

test = function(){
  //todo 
}
// or 
window.test = function(){
  //todo 
}

这样随便怎么加密，这个 test 方法会一直存在，并且调用不会出现test is not defined。

3.正确的书写（采用闭包）
我们都见过jquery，jquery就是采用闭包的方式书写。
简单来讲就是私有化所有方法（函数）和变量，然后提供公共访问方式。

我们打个样：

(function(w) {
    //定义私有化对象
    var T = {};
    //绑定方法
    T.test = function(){
        //todo 
    }
    //提供公共访问方式
    w.T = T;
})(window);
//调用test
T.test();

这样随便怎么加密，您后面都可以使用 T 来调用绑定在T上面的方法（函数）及变量。

结语：
其实当我们在写代码的时候就要考虑到这些，方便后面自己调用或者其他人的使用。
所以从开始就要规划怎么写合适。

这种情况精简后查错的方法：
打开IE的脚本错误提示，然后打开调用JS的HTML页面，它会报告缺少分号的所在位置，
然后用UE打开精简后JS文件，转到相应位置加上分号，再找到未精简的JS代码中对应的位置加上分号。

例如：

　　var a=1
　　var b=2

改为：

[code]
　　var a=1;
　　var b=2;[code]
尽量在else后面的语句使用大括号

这种情况查错起来比较麻烦，通过正则表达式
[code]else[a-zA-Z0-9]+

来查找精简后的JS文件，
或者查找else后面是否有注释的行，再找到未精简的JS代码中对应的位置加上大括号。

例如：

if (a>b)
　　a=b;
else
　　b=a;

改为：

if (a>b)
　　a=b;
else
　　{b=a}

尽量在function的反大括号后都加上分号

例如：

function a() {
　　}
　　function b() {
　　}

改为：

function a() {
　　};
　　function b() {
　　};

这样压缩后才能解决压缩后报错的问题。
同时注意中文乱码的问题，可以不另存为文件而采用复制粘贴的方式。

window.load = function()
　　{
　　}

这样定义的，结尾一定要有分号。

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。