全屏在 Iphone 6s 和 5s 上不起作用

Posted 2023-03-11

【中文标题】全屏在 Iphone 6s 和 5s 上不起作用

【英文标题】：Fullscreen is not working on Iphone 6s and 5s

【发布时间】：2017-04-07 10:55:12

【问题描述】：

我在 Iphone 6s 和 5s 上遇到了全屏模式的问题 - 它在 Chrome 和 Safari 中不起作用，我不知道其他人。我没有任何苹果设备，所以我什至无法自己复制它——这是我的一位客户报告的。我已经在 VMWare 上安装了 Mac OS Siera 并用 Safari 测试了我的项目——一切都很好。现在我要安装 XCode，但我的互联网很弱，所以这将是一个很长的过程...... 要使用全屏，我会使用这样的东西：

/** @namespace */
const THREEx        = THREEx        || ;
THREEx.FullScreen   = THREEx.FullScreen || ;

export default THREEx.FullScreen;

/**
 * test if it is possible to have fullscreen
 *
 * @returns Boolean true if fullscreen API is available, false otherwise
*/
THREEx.FullScreen.available = function()

    return this._hasWebkitFullScreen || this._hasMozFullScreen;


/**
 * test if fullscreen is currently activated
 *
 * @returns Boolean true if fullscreen is currently activated, false otherwise
*/
THREEx.FullScreen.activated = function()

    if( this._hasWebkitFullScreen )
        return document.webkitIsFullScreen;
    else if( this._hasMozFullScreen )
        return document.mozFullScreen;
    else
        console.assert(false);
    



THREEx.FullScreen.addEventListener = function(element, handler) 
    if (element.addEventListener) 
        element.addEventListener('webkitfullscreenchange', handler, false);
        element.addEventListener('mozfullscreenchange', handler, false);
        element.addEventListener('fullscreenchange', handler, false);
        element.addEventListener('MSFullscreenChange', handler, false);
    


THREEx.FullScreen.removeEventListener = function(element, handler) 
    if (element.removeEventListener) 
        element.removeEventListener('webkitfullscreenchange', handler, false);
        element.removeEventListener('mozfullscreenchange', handler, false);
        element.removeEventListener('fullscreenchange', handler, false);
        element.removeEventListener('MSFullscreenChange', handler, false);
    



function exitHandler()

    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
    
        /* Run code on exit */
    


/**
 * Request fullscreen on a given element
 * @param DomElement element to make fullscreen. optional. default to document.body
*/
THREEx.FullScreen.request   = function(element)

    element = element   || document.body;
    if( this._hasWebkitFullScreen )
        element.webkitRequestFullScreen();
    else if( this._hasMozFullScreen )
        element.mozRequestFullScreen();
    else
        console.assert(false);
    


/**
 * Cancel fullscreen
*/
THREEx.FullScreen.cancel    = function()

    if( this._hasWebkitFullScreen )
        document.webkitCancelFullScreen();
    else if( this._hasMozFullScreen )
        document.mozCancelFullScreen();
    else
        console.assert(false);
    


THREEx.FullScreen._hasWebkitFullScreen  = 'webkitCancelFullScreen' in document  ? true : false;
THREEx.FullScreen._hasMozFullScreen = 'mozCancelFullScreen' in document ? true : false;

最令人困惑的是，它与我的设备华为荣耀 6（android 4.4.2、Chrome 和 Firefox）和 Chrome 开发工具仿真运行良好。那么问题出在哪里？ ios？为什么它适用于 Android Chrome 而不是适用于 iOS Chrome？

如果有人想查看所有项目或拥有 iPhone 并可以对其进行测试 - 转到 http://3dflipbook.net，这里有 jQuery 或 WordPress 插件演示。我会很乐意提供任何细节。

提前致谢！

【问题讨论】：

我已经用 XCode iPhone 6S Simulator 在 Safari 中重现了这个问题，所以问题确实存在。

【参考方案1】：

似乎我找到了关于我的问题的答案：iOS Safari 不支持 FullScreen API http://caniuse.com/#feat=fullscreen。 iOS Chrome 比 Chrome 本身更像是 iOS Safari http://www.mobilexweb.com/blog/chrome-ios-android-4-1-jelly-bean-html5。