iOS 15.5 Safari中Full Screen API不稳定问题求助

针对你在iOS 15.5 Safari中遇到的全屏功能不稳定问题，可通过以下几点优化实现稳定效果：

1. 严格遵循用户交互触发规则 #

iOS Safari对全屏API的触发有严格限制：全屏请求必须在用户主动触发的同步事件回调中执行，不能包含异步延迟（如setTimeout）。确保按钮点击事件直接绑定btnClick函数，中间无嵌套异步逻辑。

2. 简化并标准化全屏请求代码 #

移除冗余的前缀判断，统一使用Promise风格的API调用，同时处理请求失败的情况：

// 封装全屏请求函数
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    return element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    return element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    return element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    return element.msRequestFullscreen();
  }
  return Promise.reject(new Error('不支持全屏API'));
}

// 封装退出全屏函数
function exitFullscreen() {
  if (document.exitFullscreen) {
    return document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    return document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    return document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    return document.msExitFullscreen();
  }
  return Promise.reject(new Error('不支持退出全屏'));
}

// 修正切换逻辑
let toggleBtn = false;
function btnClick() {
  const testText = document.getElementById("testText");
  const parent = document.getElementById("parent");
  
  if (!parent) return;

  if (toggleBtn) {
    exitFullscreen().catch(err => console.error('退出全屏失败:', err));
  } else {
    requestFullscreen(parent)
      .then(() => {
        // 可选：全屏后尝试锁定横屏（需用户交互触发）
        if (screen.orientation?.lock) {
          screen.orientation.lock('landscape').catch(() => {});
        }
      })
      .catch(err => {
        console.error('进入全屏失败:', err);
        // 请求失败时重置状态
        toggleBtn = false;
        if (testText) testText.textContent = toggleBtn;
      });
  }
  
  toggleBtn = !toggleBtn;
  if (testText) testText.textContent = toggleBtn;
}

3. 确保目标元素满足全屏条件 #

给需要全屏的#parent元素设置基础样式，保证其尺寸和可见性：

#parent {
  width: 100vw;
  height: 100vh;
  display: block;
  background-color: #000; /* 确保元素可见 */
}

4. 同步全屏状态与按钮状态 #

监听全屏状态变化事件，避免用户通过系统按钮退出全屏后，按钮状态与实际全屏状态不一致：

// 监听标准全屏事件
document.addEventListener('fullscreenchange', syncFullscreenState);
// 监听Safari前缀全屏事件
document.addEventListener('webkitfullscreenchange', syncFullscreenState);

function syncFullscreenState() {
  const testText = document.getElementById("testText");
  // 判断当前是否处于全屏状态
  toggleBtn = !!document.fullscreenElement || !!document.webkitFullscreenElement;
  if (testText) testText.textContent = toggleBtn;
}

5. 优化Viewport设置 #

在HTML头部添加合适的viewport元标签，避免页面缩放影响全屏效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

内容的提问来源于stack exchange，提问作者user22447141