[已解决]横屏游戏在手机微信浏览器里存在白边

Creator 2.x
#1

大家好！我正在使用Cocos来开发手机上的H5游戏，目前被下面这个问题所困扰，希望有解决思路的朋友可以帮个忙。

一）重现步骤及问题说明

1，我用Creator创建了一个Hello项目，并设置成 横屏 方向。然后部署到服务器上。

QQ图片20170304122348.png516×738 35.4 KB

2，当我用微信浏览器打开时，看似一切正常，效果如下图

128414432333911573.jpg720×1280 24.7 KB

3，如果这时我点一下屏幕，游戏画面变下图这样了（注意截图上方的白边）

770760926343939369.jpg1080×1920 70.5 KB

标签栏不见了，然后多了一条白边。一开始我是想是不是进入了“全屏模式”？于是我尝试禁止“全屏模式”：在index.html里把full-screen设置成no，在main.js里加入cc.view.enableAutoFullScreen(false)。但白边的问题没有得到解决。

4，然后我用cocos console new了一个js的Hello项目，在main.js里加入cc.view.setOrientation(cc.ORIENTATION_LANDSCAPE);，再到微信浏览器里测试，也是同样的情况。

感觉是玩家点击手机屏幕的时候，引擎让浏览器触发了一个“全屏模式”，但是某些地方又没有处理好（比如分辨率改变之后重新填充 等等）。

二）我的期望

a）进入真正的“全屏模式”（白边消失），是不是某些地方我没有配置好？

或者b）禁止这种标签栏消失，出现白边的情况（就是禁止“全屏模式”），又该怎么实现？

测试环境：Android，微信浏览器
Cocos版本：3.14.1
Creator版本：1.4.0

除了上面重现步骤所提到的本人的操作之外，其余的都是项目自身的（生成的）。

谢谢~~

1赞
#2

同问…(要6个字)

1赞
#3

一个很标准的问题格式，赞～ 不过建议发到 Creator 板块，我帮你转过去

这个问题是由于微信不支持真正的全屏，而且在部分设备上跟 X5 内核的实现有冲突，导致 X5 尝试全屏，微信又不允许，标签栏的表现在不同设备会不一样，有一些不会去掉，有一些出现你观察到的白边，有一些又会变半透明。

解决方案是需要删除 CCView.js (creator) / CCEGLView.js (cocos2d-html5) ctor 中的 enableAutoFullScreen，改为在 main.js 中处理。

我们在 Creator 1.4.1 中会把 CCView 中全屏的处理删除，改为在 main.js 中设置全屏（屏蔽百度，QQ，微信浏览器，这三者全屏都可能会存在问题）。

补充，上面说的修改 1.4 已经迁移到 main.js 中了，但是没有屏蔽微信浏览器，1.4.1 会屏蔽

1赞
#4

谢谢Panda。按照你的解决方案，我在main.js里加入设置全屏（即屏蔽微信浏览器的全屏模式）的代码，确实可行。

// 屏蔽手机微信浏览器的自动全屏
cc.view.enableAutoFullScreen(cc.sys.isMobile && cc.sys.browserType !== cc.sys.BROWSER_TYPE_MOBILE_QQ);

2赞
#5

ccview.js在哪里，我找不到啊

#6

按照你的代码放进main.js里面，好像只能用uc打开，其他的浏览器都卡在加载界面了

#7

cc.view就是frameworks\cocos2d-html5\cocos2d\core\platform\CCEGLView.js

#8

我不晓得你main.js是带creator的还是不带creator的，我的main.js是不带creator相关代码的，目前在微信内置浏览器，QQ浏览器，手机系统自带浏览器（IOS和Android）均测试OK。

#9

屏幕左右两边各有一定宽度的“黑边”，改如何设置啊？？？