# 移动端与PC端全屏的处理

一、全屏API基础

现代浏览器提供了Fullscreen API来实现全屏功能，主要包括以下方法和属性：

// 请求进入全屏
element.requestFullscreen();

// 退出全屏
document.exitFullscreen();

// 检查全屏状态
document.fullscreenElement; // 返回当前全屏的元素或null

// 全屏变化事件
document.addEventListener('fullscreenchange', handler);
document.addEventListener('fullscreenerror', errorHandler);

二、PC端全屏处理

1. 普通元素全屏

<div id="fullscreen-content" style="width: 100%; height: 100%; background: #f0f0f0;">
  <p>这是可以全屏显示的内容</p>
  <button id="fullscreen-btn">全屏显示</button>
</div>

<script>
  const fullscreenBtn = document.getElementById('fullscreen-btn');
  const content = document.getElementById('fullscreen-content');
  
  fullscreenBtn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      content.requestFullscreen().catch(err => {
        console.error(`全屏错误: ${err.message}`);
      });
    } else {
      document.exitFullscreen();
    }
  });
  
  // 监听全屏状态变化
  document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
      console.log('进入全屏模式');
    } else {
      console.log('退出全屏模式');
    }
  });
</script>

2. 视频全屏处理

<video id="video" controls width="100%">
  <source src="example.mp4" type="video/mp4">
</video>
<button id="video-fullscreen-btn">视频全屏</button>

<script>
  const video = document.getElementById('video');
  const videoFullscreenBtn = document.getElementById('video-fullscreen-btn');
  
  videoFullscreenBtn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      video.requestFullscreen().catch(err => {
        console.error(`视频全屏错误: ${err.message}`);
      });
    } else {
      document.exitFullscreen();
    }
  });
  
  // 视频自带的全屏按钮处理
  video.addEventListener('enterpictureinpicture', () => {
    console.log('视频进入画中画模式');
  });
  
  video.addEventListener('leavepictureinpicture', () => {
    console.log('视频退出画中画模式');
  });
</script>

三、移动端全屏处理

移动端全屏需要考虑更多因素，如横竖屏切换、浏览器兼容性等。

1. 普通元素全屏

// 移动端全屏函数
function toggleFullscreen(element) {
  if (!document.fullscreenElement) {
    // 移动端可能需要使用webkit前缀
    const requestMethod = element.requestFullscreen || 
                         element.webkitRequestFullscreen || 
                         element.webkitRequestFullScreen;
    
    if (requestMethod) {
      requestMethod.call(element).catch(err => {
        console.error('全屏请求失败:', err);
      });
    }
  } else {
    const exitMethod = document.exitFullscreen || 
                      document.webkitExitFullscreen;
    
    if (exitMethod) {
      exitMethod.call(document);
    }
  }
}

// 添加点击事件
document.getElementById('mobile-fullscreen-btn').addEventListener('click', () => {
  toggleFullscreen(document.getElementById('mobile-content'));
});

// 处理移动端横竖屏变化
function handleOrientationChange() {
  if (window.matchMedia("(orientation: portrait)").matches) {
    console.log('竖屏模式');
  } else {
    console.log('横屏模式');
  }
}

// 初始检查
handleOrientationChange();

// 监听方向变化
window.addEventListener('orientationchange', handleOrientationChange);

2. 移动端视频全屏

移动端视频全屏通常由浏览器原生控制，但我们可以优化体验：

<video id="mobile-video" controls playsinline webkit-playsinline>
  <source src="example.mp4" type="video/mp4">
</video>

<script>
  const mobileVideo = document.getElementById('mobile-video');
  
  // iOS上禁用默认全屏
  mobileVideo.setAttribute('playsinline', '');
  mobileVideo.setAttribute('webkit-playsinline', '');
  
  // 自定义全屏按钮
  document.getElementById('mobile-video-fullscreen').addEventListener('click', () => {
    if (mobileVideo.webkitEnterFullscreen) {
      mobileVideo.webkitEnterFullscreen();
    } else {
      mobileVideo.requestFullscreen();
    }
  });
  
  // 处理视频播放状态
  mobileVideo.addEventListener('play', () => {
    // 在移动端自动横屏
    if (screen.orientation && screen.orientation.lock) {
      screen.orientation.lock('landscape').catch(() => {
        console.log('横屏锁定失败');
      });
    }
  });
  
  mobileVideo.addEventListener('pause', () => {
    // 恢复竖屏
    if (screen.orientation && screen.orientation.unlock) {
      screen.orientation.unlock();
    }
  });
</script>

四、跨浏览器兼容处理

// 全屏API前缀处理
const fullscreenAPI = {
  request: [
    'requestFullscreen',
    'webkitRequestFullscreen',
    'mozRequestFullScreen',
    'msRequestFullscreen'
  ],
  exit: [
    'exitFullscreen',
    'webkitExitFullscreen',
    'mozCancelFullScreen',
    'msExitFullscreen'
  ],
  element: [
    'fullscreenElement',
    'webkitFullscreenElement',
    'mozFullScreenElement',
    'msFullscreenElement'
  ],
  event: [
    'fullscreenchange',
    'webkitfullscreenchange',
    'mozfullscreenchange',
    'MSFullscreenChange'
  ]
};

// 获取兼容的方法
function getFullscreenMethod(type) {
  for (let i = 0; i < fullscreenAPI[type].length; i++) {
    if (document[fullscreenAPI[type][i]] !== undefined) {
      return fullscreenAPI[type][i];
    }
  }
  return null;
}

// 兼容的全屏切换函数
function crossBrowserToggleFullscreen(element) {
  const requestMethod = getFullscreenMethod('request');
  const exitMethod = getFullscreenMethod('exit');
  const fullscreenElementMethod = getFullscreenMethod('element');
  
  if (!document[fullscreenElementMethod]) {
    element‌:ml-search[requestMethod];
  } else {
    document‌:ml-search[exitMethod];
  }
}

// 兼容的事件监听
function addFullscreenChangeListener(handler) {
  fullscreenAPI.event.forEach(event => {
    document.addEventListener(event, handler);
  });
}

五、CSS全屏样式

/* 全屏时的样式 */
:-webkit-full-screen {
  background-color: white;
}

:-moz-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

:fullscreen {
  background-color: white;
}

/* 全屏按钮样式 */
.fullscreen-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1000;
}

/* 移动端横屏时的特殊样式 */
@media screen and (orientation: landscape) {
  .video-container {
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: 0 0;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

六、实际应用建议

1. ‌检测全屏支持‌：

function isFullscreenSupported() {
  return !!(
    document.fullscreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
  );
}

2. ‌全屏状态管理‌：

function isFullscreen() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
}

3. ‌移动端特殊处理‌：

• iOS Safari需要playsinline属性
• Android Chrome可能需要手动处理横屏
• 考虑添加全屏按钮的触摸反馈