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

【问题标题】：Fullscreen is not working on Iphone 6s and 5s全屏在 Iphone 6s 和 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 中重现了这个问题，所以问题确实存在。

标签： javascript ios iphone html fullscreen

【解决方案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。

【讨论】：