lufy's legend

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 508|回复: 2

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

[复制链接]

4

主题

0

好友

50

积分

士兵

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群,希望找到遇到并处理的人,但没有,我想我是不是应该放弃了。

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










回复

使用道具 举报

4

主题

0

好友

50

积分

士兵

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">
<!-- 游戏嵌入iframe     //华为荣耀honor 6x 在 meta  x5- 360-  full-screen 模式下,出现底部原有菜单大小的“剪切”区域透明,即:底部出现镂空区域,上下滑时就会出现 -->
<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>

        <!--http://www.html5rocks.com/en/mobile/mobifying/-->
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">

        <!--https://developer.apple.com/libr ... les/MetaTags.html-->
        <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">

        <!-- force webkit on 360 -->
        <meta name="renderer" content="webkit">
        <meta name="force-rendering" content="webkit">
        <!-- force edge on IE -->
        <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">

        <!-- force full screen on some browser -->
        <meta name="full-screen" content="true">
        <meta name="x5-fullscreen" content="true">
        <meta name="360-fullscreen" content="true">

        <!-- force screen orientation on some browser -->
        <meta name="screen-orientation" content="portrait">
        <meta name="x5-orientation" content="portrait">

        <!--fix fireball/issues/3568 -->
        <!--<meta name="browsermode" content="application">-->
        <meta name="x5-page-mode" content="app">

        <!--<link rel="apple-touch-icon" href=".png" />-->
        <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <!-- <link rel="stylesheet" type="text/css" href="style-mobile.css?_v=233" /> -->

        <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>
回复

使用道具 举报

36

主题

7

好友

8966

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-11-13 00:51:30 |显示全部楼层
不好意思,最近没怎么来论坛,
找到原因就好
不回答与技术和引擎不相关的问题
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

防止垃圾广告,请填写任意字符

Archiver|lufy's legend

GMT+8, 2020-11-28 19:14 , Processed in 0.049351 second(s), 21 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部