移动端浏览器如何检测屏幕方向变化？排查三星S21适配问题

先梳理你原代码里的几个关键问题：

• 函数名拼写错误：orentation应为orientation，且函数未接收事件参数e
• matchMedia逻辑混淆：变量名portrait对应查询landscape，且未监听媒体查询的change事件
• screen.orientation事件监听未传递事件对象
• orientationchange事件中直接alert(screen.orientation)无法显示有效信息，需读取type属性

以下是几种可靠的实现方式，适配Firefox和Chrome移动端：

方法1：使用orientationchange事件（兼容性最优） #

这是传统的屏幕方向检测方式，支持绝大多数移动浏览器：

const pre = document.createElement('pre');
document.body.appendChild(pre);

function log(message) {
  pre.innerHTML += message + '\n';
}

// 监听orientationchange事件
window.addEventListener('orientationchange', function() {
  // window.orientation返回角度：0/180为竖屏，90/-90为横屏
  const isLandscape = Math.abs(window.orientation) === 90;
  log(isLandscape ? '切换为横屏' : '切换为竖屏');
  // 也可以用screen.orientation获取更详细信息
  if (screen.orientation) {
    log(`当前方向类型：${screen.orientation.type}`);
  }
});

方法2：使用matchMedia监听媒体查询（推荐，更灵活） #

通过监听(orientation: landscape)或(orientation: portrait)的媒体查询变化，能精准匹配屏幕状态：

const pre = document.createElement('pre');
document.body.appendChild(pre);

function log(message) {
  pre.innerHTML += message + '\n';
}

// 创建横屏媒体查询对象
const landscapeQuery = window.matchMedia('(orientation: landscape)');

// 定义方向变化处理函数
function handleOrientationChange(e) {
  if (e.matches) {
    log('切换为横屏');
  } else {
    log('切换为竖屏');
  }
}

// 初始触发一次，获取当前状态
handleOrientationChange(landscapeQuery);

// 监听媒体查询变化
landscapeQuery.addEventListener('change', handleOrientationChange);

方法3：结合screen.orientation的change事件 #

针对支持Screen Orientation API的浏览器（Chrome、Firefox移动端均支持）：

const pre = document.createElement('pre');
document.body.appendChild(pre);

function log(message) {
  pre.innerHTML += message + '\n';
}

if (screen.orientation) {
  // 初始状态
  log(`初始方向：${screen.orientation.type}`);
  
  // 监听方向变化
  screen.orientation.addEventListener('change', function() {
    const isLandscape = screen.orientation.type.includes('landscape');
    log(isLandscape ? '切换为横屏' : '切换为竖屏');
  });
}

关键注意事项 #

• 必须设置viewport元标签：在HTML头部添加以下代码，否则移动端浏览器可能会缩放页面，导致方向变化事件不触发或异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 避免使用throttle过度限制事件触发：方向变化是一次性操作，不需要节流，过度节流可能导致事件被忽略。

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