查看: 16939|回复: 2

我知道这有点过分，但还是抱着期望问下前辈

4 主题	0 好友	52 积分

士兵

Rank: 1

发消息

发表于 2020-10-19 19:10:17 |显示全部楼层

本帖最后由 leauna 于 2020-10-20 14:44 编辑

结贴！！
结贴！！！！！！！
因为是垃圾手机的问题
修改：垃圾honor 6x！我试了所有的H5引擎都会出现这个问题，不是lufy的问题，结贴，扔手机了！

这是一个小众的问题，因为是在我的华为honor 6x手机的原生浏览器，因为浏览器有上部地址栏和底部菜单栏，这些需要用meta标签 full-screen隐藏掉，我按照市场上的引擎和网页套用关系，层层对比，我能模仿的我觉得是一模一样了，但是浏览器底部“偶尔”还是出现菜单栏大小的诡异区域，所以我感觉这个问题是“浏览器的特殊性”，为了排除问题，我把代码简化了，摘出最关键的部分，如下

父页面
<meta content="true" name="full-screen" />
<meta content="true" name="x5-fullscreen" />
<meta content="true" name="360-fullscreen" />

iframe打开的子页面
<html touch-action: none">//这里，我想把触屏的所有事件都禁止传递到浏览器层面，但是无效
<script>
var c = document.getElementById("canvas");
c.addEventListener("touchstart",function (event) {
      event.stopPropagation();
      event.preventDefault();//这是有效的，因为看不到浏览器页面的上下滑动的，但是针对这个“特殊的垃圾手机浏览器”那个奇葩bug无效
});
c.addEventListener("touchmove",function (event) {
      event.stopPropagation();
      event.preventDefault();//这是有效的，因为看不到浏览器页面的上下滑动的，但是针对这个“特殊的垃圾手机浏览器”那个奇葩bug无效
});
c.addEventListener("touchend",function (event) {
      event.stopPropagation();
      event.preventDefault();//这是有效的，因为看不到浏览器页面的上下滑动的，但是针对这个“特殊的垃圾手机浏览器”那个奇葩bug无效
});

c.addEventListener("focusout",function (event) {
      event.stopPropagation();
      event.preventDefault();//这是有效的，因为看不到浏览器页面的上下滑动的，但是针对这个“特殊的垃圾手机浏览器”那个奇葩bug无效
});
</script>

线索：经过我多次试验，因为是网页嘛，所以刷新url看程序，既然它是偶尔出现，就是有时如果不出现这个bug，你怎么滑动这个页面这个游戏界面，它就一直不出现了，
如果刷新后，你滑动页面出现了这个“bug”，那就你一滑动，它就跟着出现而且是“必现”了，就是手指往上滑动，它就出现那么个“空白区域”，
所以，我怀疑是页面初始化时，浏览器解析html的meta啊、子页面啊、监听啊、“有时顺序不一致？，或者浏览器当时的内存状态？”，导致的这种不是“加载后不出现就是不出现、出现了就一直出现的问题”

最后，个人总结，我觉得是需要加一些“特殊的代码”来解决这种特殊的“手机浏览器”，但我不知道这些代码是什么，按照我所知道的就是加“touch-action: none、
和js监听滑动事件然后event.preventDefault()拦截默认行为，再狠点就是event.stopPropagation()阻止冒泡”通过这些手段不让“事件”传到“浏览器”
但对于这个“honor 6x 手机浏览器”，我失败了，黔驴技穷了，而且我问了好多js的qq群，希望找到遇到并处理的人，但没有，我想我是不是应该放弃了。

最后，我是粉黑，这个手机生活中已经不用了，这次只是想把问题弄清楚，才拿出来研究研究。

使用道具举报

leauna

4 主题	0 好友	52 积分

士兵

Rank: 1

发消息

发表于 2020-10-19 19:17:39 |显示全部楼层

最后附上两个html全部代码
父页

<!doctype html>
<html>
<head>
<title>嵌入式隐藏地址栏</title>
<meta name="applicable-device" content="mobile">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport" />

<meta content="true" name="full-screen" />
<meta content="true" name="x5-fullscreen" />
<meta content="true" name="360-fullscreen" />
</head>
<body style="margin: 0;background-color: green">

<div style="height:100%;position:absolute;top:0;width:100%;overflow-y : hidden;">
<iframe id="frame" src="./sc2.html?uid=<?=$_GET['uid'];?>&sid=<?=$_GET['sid'];?>&sign=<?=$_GET['sign'];?>&version=<?=time();?>" scrolling="no" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
</div>
</body>
</html>

子页面sc2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="width: 100%;height: 100%;touch-action: none">
<head>
      <meta charset="utf-8">

      <title>丛林猎人</title>

      
      <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">

      
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <meta name="format-detection" content="telephone=no">

      
      <meta name="renderer" content="webkit">
      <meta name="force-rendering" content="webkit">
      
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta http-equiv="Expires" content="0">
      <meta http-equiv="Pragma" content="no-cache">
      <meta http-equiv="Cache-control" content="no-cache">
      <meta http-equiv="Cache" content="no-cache">
      <meta name="msapplication-tap-highlight" content="no">

      
      <meta name="full-screen" content="true">
      <meta name="x5-fullscreen" content="true">
      <meta name="360-fullscreen" content="true">

      
      <meta name="screen-orientation" content="portrait">
      <meta name="x5-orientation" content="portrait">

      
      
      <meta name="x5-page-mode" content="app">

      
      

      <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
      

      <style>
         html,
         body {
            -ms-touch-action: none;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
         }

         canvas {
            background-color: rgba(0, 0, 0, 0);
            outline: none;
         }

         #splash {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* background: rgba(0, 0, 0, 0) url(./assets/resources/splash.img.jpg?_v=233) no-repeat center; */
            background-size: 100%;
         }
      </style>

</head>
<body style="width: 100%;height: 100%;    background-color:#e13dff;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">

      <canvas id="canvas" style="width:1000%;height:1000%;position: absolute;left: 0px;top: 0px;background: #6e0d09 none repeat scroll 0% 0%;"></canvas>

<script>
         var c = document.getElementById("canvas");
         c.addEventListener("touchstart",function (event) {
            event.stopPropagation();
            event.preventDefault();
         });
         c.addEventListener("touchmove",function (event) {
            event.stopPropagation();
            event.preventDefault();

         });
         c.addEventListener("touchend",function (event) {
            event.stopPropagation();
            event.preventDefault();});

         c.addEventListener("focusout",function (event) {
            event.stopPropagation();
            event.preventDefault();});
      </script>
</body>
</html>

使用道具举报