如何检测设备是否为横屏并应用不同样式

在移动端开发中，设备横竖屏状态的变化会直接影响页面布局的展示效果，针对不同屏幕方向应用对应的样式是提升用户体验的重要手段。常见的检测方式分为CSS原生方案和JavaScript逻辑方案，开发者可以根据实际需求选择合适的实现方式。

一、CSS媒体查询实现横屏样式适配

CSS原生提供了orientation媒体特性，可以直接检测设备的屏幕方向，无需额外的JavaScript逻辑，是最轻量的横屏适配方案。

1. 媒体查询语法说明

orientation有两个可选值：portrait表示竖屏，landscape表示横屏。我们可以在CSS中通过媒体查询为不同方向编写样式。

2. 代码示例

以下是一个简单的示例，竖屏时容器宽度为90%，横屏时容器宽度为70%，同时调整字体大小：

/* 默认竖屏样式 */
.container {
    width: 90%;
    margin: 0 auto;
    font-size: 16px;
}

/* 横屏样式适配 */
@media screen and (orientation: landscape) {
    .container {
        width: 70%;
        font-size: 18px;
    }
    .title {
        color: #2c3e50;
    }
}

3. 方案优缺点

• 优点：无需JavaScript逻辑，性能更好，实现简单，兼容性好
• 缺点：只能处理样式相关的适配，无法在横屏时执行额外的逻辑操作

二、JavaScript检测横屏并应用样式

如果需要在检测到横屏时执行额外的逻辑，比如弹出提示、加载不同的资源，就需要使用JavaScript来实现横屏检测。

1. 基于window.matchMedia检测

window.matchMedia可以实时监听媒体查询的状态变化，是JavaScript中检测屏幕方向的推荐方式。

// 定义横屏媒体查询
const landscapeMedia = window.matchMedia('(orientation: landscape)');

// 处理横竖屏变化的函数
function handleOrientationChange(media) {
    const container = document.querySelector('.container');
    if (media.matches) {
        // 横屏状态
        container.classList.add('landscape-mode');
        console.log('当前为横屏状态');
    } else {
        // 竖屏状态
        container.classList.remove('landscape-mode');
        console.log('当前为竖屏状态');
    }
}

// 初始执行一次
handleOrientationChange(landscapeMedia);

// 监听屏幕方向变化
landscapeMedia.addEventListener('change', handleOrientationChange);

对应的CSS样式：

.container {
    width: 90%;
    margin: 0 auto;
    transition: all 0.3s ease;
}

/* 横屏时添加的样式类 */
.landscape-mode {
    width: 70%;
    background-color: #f5f7fa;
    padding: 20px;
}

2. 基于window.innerWidth和window.innerHeight判断

也可以通过对比窗口的宽度和高度来判断横竖屏，宽度大于高度时为横屏：

function checkOrientation() {
    const container = document.querySelector('.container');
    if (window.innerWidth > window.innerHeight) {
        container.classList.add('landscape-mode');
    } else {
        container.classList.remove('landscape-mode');
    }
}

// 初始检测
checkOrientation();

// 监听窗口大小变化（横竖屏切换会触发resize）
window.addEventListener('resize', checkOrientation);

3. 方案优缺点

• 优点：可以执行额外的逻辑操作，灵活性更高
• 缺点：需要额外的JavaScript代码，性能略低于纯CSS方案

三、两种方案的适用场景

四、注意事项

• 部分设备在横竖屏切换时会有延迟，建议添加过渡样式提升体验
• 如果使用JavaScript监听resize事件，注意防抖处理，避免频繁触发逻辑
• 测试时需要覆盖不同的移动端设备，确保适配效果符合预期

横屏检测媒体查询CSS样式适配JavaScript_横屏判断响应式布局修改时间：2026-06-11 13:18:26