H5设置横屏，监听横屏屏幕方向，适配横屏，锁定屏幕

以下是关于H5设置横屏、监听横屏屏幕方向以及适配横屏的详细新手入门指南：

设置横屏

1. CSS媒体查询：
   使用CSS媒体查询可以根据设备的方向设置不同的样式。当设备处于横屏模式时，可以应用特定的样式。

   @media screen and (orientation: landscape) {
       /* 横屏时的样式 */
   }
   
   @media screen and (orientation: portrait) {
       /* 竖屏时的样式 */
   }
   

   在竖屏状态下，可以放置一个提示用户旋转设备的元素。
2. JavaScript检测并提示：
   使用window.orientation或screen.orientation来检测屏幕方向，并向用户显示提示或警告。

   window.addEventListener("resize", checkOrientation);
   
   function checkOrientation() {
       if (window.screen.orientation) {
           const orientation = window.screen.orientation.type;
           if (orientation === "portrait-primary" || orientation === "portrait-secondary") {
               showRotateInstruction(); // 显示旋转提示的函数
           } else {
               hideRotateInstruction(); // 隐藏旋转提示的函数
           }
       } else {
           // 对于不支持screen.orientation的浏览器，可以考虑使用其他方法或降级处理
       }
   }
   
   function showRotateInstruction() {
       // 显示旋转提示的逻辑，例如改变元素的display属性等。
   }
   
   function hideRotateInstruction() {
       // 隐藏旋转提示的逻辑。
   }
   

   type 的返回值总共有四个，对应着四个不同的旋转方向：

• portrait-primary：竖屏状态并且旋转角度为 0 度，也就是设备的自然位置
• portrait-secondary：竖屏状并且即旋转角度为 180 度，也就是倒着拿的位置
• landscape-primary：横屏状态并且旋转角度为 90 度
• landscape-secondary：横屏状态并且旋转角度为 270 度

3. 全屏API与屏幕方向API结合使用：
   如果应用是全屏应用，可以结合使用全屏API (requestFullscreen) 和屏幕方向API (screen.orientation.lock) 来尝试锁定屏幕方向。

   document.documentElement.requestFullscreen(); // 请求全屏显示
   
   screen.orientation.lock('landscape').catch((error) => {
       console.error('Unable to lock screen orientation:', error);
   }); // 尝试锁定为横屏模式，并处理可能的错误。
   

4. CSS3旋转：
   通过CSS3的transform属性，可以将页面的根容器在竖屏状态下整体顺时针旋转90度，从而实现横屏效果。

   var detectOrient = function () {
       var width = document.documentElement.clientWidth,
           height = document.documentElement.clientHeight,
           $wrapper = document.getElementById("content"),
           style = "";
       if (width >= height) { // 横屏
           style += "width:" + width + "px;";
           style += "height:" + height + "px;";
           style += "-webkit-transform: rotate(0); transform: rotate(0);";
           style += "-webkit-transform-origin: 0 0;";
           style += "transform-origin: 0 0;";
       }
       else { // 竖屏
           style += "width:" + height + "px;";
           style += "height:" + width + "px;";
           style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
           style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
           style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
       }
       $wrapper.style.cssText = style;
   }
   window.onresize = detectOrient;
   detectOrient();
   

监听横屏屏幕方向

1. 使用orientationchange事件：
   监听orientationchange事件，可以在设备方向变化时执行相应的操作。

   window.addEventListener('orientationchange', function() {
       if (window.orientation === 90 || window.orientation === -90) {
           console.log('当前是横屏');
       } else {
           console.log('当前是竖屏');
       }
   });
   

2. 使用resize事件：
   由于部分设备可能不支持orientationchange事件，可以结合resize事件来监听屏幕方向变化。

   window.addEventListener('resize', function() {
       if (window.innerWidth > window.innerHeight) {
           console.log('当前是横屏');
       } else {
           console.log('当前是竖屏');
       }
   });
   

3. 使用screen.orientation API：
   screen.orientation API 提供了更强大的功能，可以获取屏幕方向的详细信息，并监听方向变化。

   function handleOrientationChange() {
       if (screen.orientation.type.startsWith('landscape')) {
           console.log('当前是横屏');
       } else {
           console.log('当前是竖屏');
       }
   }
   
   window.addEventListener('orientationchange', handleOrientationChange);
   

锁定屏幕

方法一：使用screen.orientation.lock()（推荐）

screen.orientation.lock() 是一个现代的浏览器API，可以尝试锁定屏幕方向为指定的模式（如竖屏或横屏）。以下是如何使用它的示例代码：

// 尝试锁定屏幕为竖屏
screen.orientation.lock('portrait').then(() => {
    console.log('屏幕已锁定为竖屏');
}).catch((error) => {
    console.error('无法锁定屏幕方向：', error);
});

• portrait：锁定为竖屏模式。
• landscape：锁定为横屏模式。
• any：允许用户自由切换屏幕方向。

方法二：通过CSS和JavaScript检测并调整

如果你的浏览器不支持screen.orientation.lock()，或者你希望在不支持该API的情况下提供降级方案，可以通过监听屏幕方向变化并强制调整页面样式来实现。

1. 监听屏幕方向变化

使用resize事件或orientationchange事件来监听屏幕方向的变化。

window.addEventListener('resize', handleScreenOrientation);
window.addEventListener('orientationchange', handleScreenOrientation);

function handleScreenOrientation() {
    const isLandscape = window.innerWidth > window.innerHeight;
    if (isLandscape) {
        // 强制调整为竖屏样式
        document.body.style.transform = 'rotate(90deg)';
        document.body.style.transformOrigin = 'left top';
        document.body.style.width = `${window.innerHeight}px`;
        document.body.style.height = `${window.innerWidth}px`;
    } else {
        // 恢复竖屏样式
        document.body.style.transform = '';
        document.body.style.transformOrigin = '';
        document.body.style.width = '';
        document.body.style.height = '';
    }
}

2. 提示用户旋转设备

如果用户尝试将设备旋转到横屏模式，可以通过一个覆盖层提示用户将设备旋转回竖屏。

<div id="rotate-prompt" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); color: white; display: flex; justify-content: center; align-items: center; display: none;">
    请将设备旋转为竖屏模式
div>

function handleScreenOrientation() {
    const isLandscape = window.innerWidth > window.innerHeight;
    if (isLandscape) {
        document.getElementById('rotate-prompt').style.display = 'flex';
    } else {
        document.getElementById('rotate-prompt').style.display = 'none';
    }
}

注意事项

1. 浏览器兼容性：

   • screen.orientation.lock() 在一些旧版本浏览器或某些移动设备上可能不可用。可以通过if ('orientation' in screen && 'lock' in screen.orientation)来检测是否支持。
   • 如果不支持，可以使用上述的CSS和JavaScript方法作为降级方案。

2. 用户体验：

   • 强制锁定屏幕方向可能会对用户体验产生一定影响，尤其是当用户希望自由切换屏幕方向时。因此，在使用这些方法时，需要权衡是否真的需要锁定屏幕方向。

3. 测试：

   • 在不同设备和浏览器上进行测试，确保你的实现能够正常工作。特别是对于iOS设备，某些浏览器（如Safari）可能对屏幕方向控制有更严格的限制。

通过以上方法，你可以尝试锁定屏幕方向，防止用户将设备切换到横屏模式。