求解， safari 用了全屏的方法， 在ios 升级13 之后， 顶部无法被点击了

[a941096560]

• Creator 版本： 2.2.0

• 目标平台： web

• 详细报错信息，包含调用堆栈：

• 重现方式：

• 之前哪个版本是正常的 ： ios 12

• 手机型号 ： 苹果 x 系列全部

• 手机浏览器 ： safari

• 编辑器操作系统 ： ios13

• 编辑器之前是否有其它报错 ：

• 出现概率： 必先=现

• 额外线索：

[a941096560]

就是safari浏览器全屏后顶部点击不是会弹出地址栏吗， 但是现在横屏全屏后顶部无法被点击了。 地址栏也不弹出，顶部那一块的所有按钮都失效了。 但是当我触发输入框弹出的时候，顶部区域是可以点击的， 也会弹出地址栏。 这是什么原因呢。

代码参考 https://blog.csdn.net/qq_25076715/article/details/89886490

https://blog.csdn.net/u013654125/article/details/79034208 基本上实现全屏的方法， 以及地址栏出现后处理的方法和都是来源于这两位大神的方法

[a941096560]

[a941096560]

没有人遇到吗， 我看 2.2.0的官方demo ，helworld 在ios 13上面也遇到这个bug 了。 但是在1.9.3的creator上面构建出来的没有这个bug 。 同样的手机

[youMuchao]

持续关注

[a941096560]

真的没人遇到吗，只有x 以上的手机 ios 13的系统才有问题。

[a941096560]

有方案了， 当我注释

index.html 的 content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/> 这段代码， 这样我的游戏就不会全屏，在iponex 上面横屏全屏的时候会显示左右两个黑边， 可以点击黑边进行滚动。 点击头部也会弹出地址栏， 不会导致点击 头部位置失效。

我的全屏适配里还有这段代码
if (isIphoneX) {
document.querySelector('meta[name=viewport]').content = 'width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'
console.log('我是iponex')
}

经过多次测试， 会导致bug 的原因就是我设置了 name="viewport"
content="width=device-width 。

其它的都不是很重要的因素， 重点就是这里。 但是目前还没有特别完美的解决方法， 只是有一个保底的方案和研究的方向而已。

[a941096560]

目前的解决方案， 因为我的技术也不够真的去看底层，所以说在我的研究上在工程里打了一个补丁。 经过多次测试发现，
document.querySelector('meta[name=viewport]').content = 'width=897,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'

width = 897的时候 是超过了 iponex max 设备的width 一个像素点 ， 然后我就可以点击顶部弹出地址栏了。 这样就达到了我们的要求。 我们在地址栏出现的时候， 右侧会有一个小窗口提示用户可以滑动全屏，并且屏幕会整体下移，让顶部的按钮可以点击。 但是有一个缺陷是，在这个小窗口里， 可以左右滑动，甚至缩放， 很奇怪这个时候，我限制缩放的代码无效了。

另外这个bug只出现在iponex系列上面， x 和xr 和x mas 的 width 应该是不同的， 所以 897这个值应该也不同， 经过我无脑的测试， 896应该是 x max 的width， 因为 896就不可以点出地址栏， 滑动也无效， 897就可以点出来。

解决了这个坑， 不知道对大家有没有帮助， 反正我是无语了。 感觉别人都不会遇到这个bug，就我们遇到了。

解决方案的代码是，在原有的监听手机翻转的代码里， 加入我的 iponex 适配代码
function iponeXFit(){
if (isIphoneX) {
if(window.orientation == 90 || window.orientation == -90){
document.querySelector('meta[name=viewport]').content = 'width=897,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'
}
else if(window.orientation == 0 || window.orientation == 180){
document.querySelector('meta[name=viewport]').content = 'width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'
}
else
{
document.querySelector('meta[name=viewport]').content = 'width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'
}
console.log('我是iponex')
}
}

[ihc523]

MARK

[a941096560]

昨天还没有彻底解决， 今天经过一天的测试， 之前的代码遗留了一些问题， 一个是没有判断是否是safari浏览器，其他浏览器，比如谷歌，360，火狐受到了影响， 导致原本正常显示的浏览器不正常了。 所以代码加上判断。 然后是 采用了一位大佬的方法，因为当safari 不是全屏的时候会弹出一个窗口提示用户在窗口内滑动然后全屏吗， 这个窗口双击 或者手指在上面拉是可以放大和缩小的。 于是使用大佬的方法https://juejin.im/post/5b46ec375188251ac9767094 完美解决这个问题，怎么点怎么滑都没用。

最终代码：
function iponeXFit(){
if (isIphoneX) {
if(isSafari && (window.orientation == 90 || window.orientation == -90)){
if(screen.height % 896 == 0) //如果横屏之后的宽度除以896 能除尽， 那么就需要设置width 896 +1 主要是 一款XR 和 XS Max
{
document.querySelector('meta[name=viewport]').content = 'width=897,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'
}
else if(screen.height % 812 == 0)//如果横屏之后的宽度除以812 能除尽， 那么就需要设置width 812 +1 主要是 x 和 XS 以及 一款 XR？
{
document.querySelector('meta[name=viewport]').content = 'width=813,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'
}
}
else
{
document.querySelector('meta[name=viewport]').content = 'width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover'
}
}
}

解决safari 双击全屏的问题 ， 直接拷贝可用， 没有深入理解。
//如果是 苹果safari 怎么阻止双击缩放 和滑动缩放 来自 https://juejin.im/post/5b46ec375188251ac9767094
if (isSafari)
{
document.addEventListener('touchstart',function (event) {
if(event.touches.length>1){
event.preventDefault();
}
});
var lastTouchEnd=0;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false);
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
}

最后 还有一个问题， 为什么 是 897 和 813 这是因为苹果的x系列的尺寸是896和812，看这个链接https://www.jianshu.com/p/5208fbfe28fb。

所以比原始尺寸大一点， 让模拟器产生一种我包不住窗口的状态， 这个时候点击地址栏就能弹出来了。 而完美适配的时候 如果你给 896 和 812 是点不出地址栏的。

[zh_fly4ever]

mark