如何同时检测移动设备与屏幕朝向实现移动端竖屏下的指定内容展示

算力阿峰

2026-9-25

方案1：JS + CSS 组合实现（推荐，性能更高，维护方便）

先通过JS判断是否为移动设备，仅在移动设备上给根元素加专属标识类，再配合朝向的媒体查询控制样式，桌面端永远不会触发对应的样式规则：

第一步：JS 添加设备标识

// 页面加载完成后判断设备类型
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  document.documentElement.classList.add('is-mobile');
}

第二步：CSS 双重条件控制

/* 默认先隐藏目标元素 */
.land-msg {
  display: none;
}
/* 只有同时满足「是移动设备」+「竖屏状态」才会显示对应元素 */
@media (orientation: portrait) {
  html.is-mobile .land-msg {
    display: block;
  }
}

方案2：纯JS实现（适合需要同步执行其他逻辑的场景）

直接在JS里同时判断设备类型和屏幕朝向，还可以监听朝向变化实时更新状态：

// 判断是否为移动设备
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// 判断是否为竖屏
let isPortrait = window.matchMedia("(orientation: portrait)").matches;

// 状态校验逻辑
function checkStatus() {
  const targetEl = document.querySelector('.land-msg');
  if (isMobile && isPortrait) {
    // 这里写竖屏移动端要执行的逻辑，比如展示指定文本
    targetEl.style.display = 'block';
  } else {
    targetEl.style.display = 'none';
  }
}

// 页面加载时执行一次
checkStatus();

// 监听屏幕朝向变化，实时更新状态
window.addEventListener('orientationchange', () => {
  isPortrait = window.matchMedia("(orientation: portrait)").matches;
  checkStatus();
});