在移动端开发中,横屏场景的需求较为常见，例如视频播放、游戏、图片浏览等，要实现移动端的横屏效果，主要依赖于JavaScript（JS）结合CSS和HTML的特性进行检测与适配，以下从检测横竖屏、布局适配、事件处理及注意事项等方面展开详细说明。

横竖屏检测方法

移动端横竖屏检测的核心是获取设备的屏幕方向信息,主要通过以下几种方式实现：

使用window.orientation属性

window.orientation是移动端设备特有的属性，表示设备旋转的角度，其值可能为：

• 0：设备竖屏（正立）
• 90：设备向左横屏
• -90：设备向右横屏
• 180：设备倒立竖屏（较少使用）

通过监听orientationchange事件，可以实时获取屏幕方向变化：

window.addEventListener('orientationchange', function() {
    const orientation = window.orientation;
    if (orientation === 90 || orientation === -90) {
        console.log('横屏模式');
        // 横屏逻辑
    } else {
        console.log('竖屏模式');
        // 竖屏逻辑
    }
});

使用CSS媒体查询

CSS的orientation媒体查询可以直接针对横竖屏应用不同样式：

/* 竖屏样式 */
@media screen and (orientation: portrait) {
    body {
        background: red;
    }
}
/* 横屏样式 */
@media screen and (orientation: landscape) {
    body {
        background: blue;
    }
}

但CSS无法直接控制JS逻辑,需结合JS动态修改类名或样式来实现交互控制。

通过屏幕宽高比判断

部分设备可能不支持window.orientation，可通过比较window.innerWidth和window.innerHeight判断方向：

function checkOrientation() {
    if (window.innerWidth > window.innerHeight) {
        console.log('横屏');
    } else {
        console.log('竖屏');
    }
}
window.addEventListener('resize', checkOrientation);
checkOrientation(); // 初始检查

横屏布局适配

横屏时屏幕的宽高比变化较大,需调整布局以优化用户体验：

动态修改CSS类

通过JS动态添加或移除横屏类名,结合CSS实现布局切换：

function handleOrientation() {
    const html = document.documentElement;
    if (window.orientation === 90 || window.orientation === -90) {
        html.classList.add('landscape');
    } else {
        html.classList.remove('landscape');
    }
}
window.addEventListener('orientationchange', handleOrientation);
handleOrientation();

CSS中定义横屏样式：

.landscape .container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
}

使用Flex或Grid布局

横屏时调整Flex或Grid的排列方向,

.container {
    display: flex;
    flex-direction: column; /* 竖屏时纵向排列 */
}
.landscape .container {
    flex-direction: row; /* 横屏时横向排列 */
}

视口适配

横屏时需确保视口（viewport）配置正确，避免缩放问题：

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

并通过JS动态调整视口宽度：

function adjustViewport() {
    const viewport = document.querySelector('meta[name=viewport]');
    if (window.orientation === 90 || window.orientation === -90) {
        viewport.content = 'width=device-height, initial-scale=1.0';
    } else {
        viewport.content = 'width=device-width, initial-scale=1.0';
    }
}
window.addEventListener('orientationchange', adjustViewport);

横屏事件与交互优化

1. 触摸事件处理
   横屏时触摸区域变化，需调整事件监听范围，横屏游戏中的滑动控制区域应覆盖屏幕底部：

   const gameArea = document.getElementById('game-area');
   gameArea.addEventListener('touchstart', function(e) {
       const touch = e.touches[0];
       const rect = gameArea.getBoundingClientRect();
       console.log(`触摸位置: X=${touch.clientX - rect.left}, Y=${touch.clientY - rect.top}`);
   });

2. 键盘输入适配
   横屏时弹出虚拟键盘可能遮挡输入框，需动态调整输入框位置或使用input事件监听：

   const input = document.getElementById('input');
   input.addEventListener('focus', function() {
       if (window.orientation === 90 || window.orientation === -90) {
           input.scrollIntoView({ behavior: 'smooth', block: 'center' });
       }
   });

常见问题与解决方案

横屏检测延迟

orientationchange事件可能在部分设备上存在延迟，可结合resize事件补充检测：

let resizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        handleOrientation();
    }, 200);
});

全屏模式兼容性

横屏时若需全屏显示,需调用全屏API并处理兼容性：

function enterFullscreen() {
    const elem = document.documentElement;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    }
}
// 横屏时自动进入全屏
window.addEventListener('orientationchange', function() {
    if (window.orientation === 90 || window.orientation === -90) {
        enterFullscreen();
    }
});

相关问答FAQs

Q1：为什么部分设备无法通过window.orientation获取横屏状态？
A：window.orientation是Webkit内核浏览器（如旧版iOS Safari）的特有属性，而现代Android设备或基于Chromium的浏览器可能已不再支持，此时可通过window.innerWidth和window.innerHeight的宽高比判断，或使用screen.orientation API（需兼容性处理）。

Q2：横屏时页面元素布局错乱怎么办？
A：首先检查CSS中是否针对横屏模式定义了适配样式（如媒体查询或动态类名）；其次确保使用相对单位（如vw、vh、）而非固定像素（px）；最后可通过JS动态计算元素位置或使用Flex/Grid布局实现自适应调整，若问题持续，可使用浏览器开发者工具的设备模拟功能测试不同横屏状态下的布局表现。