如何结合CURRENT-DEVICE模块实现移动/平板设备竖屏锁定

一、通过动态添加类实现精准设备匹配 #

你之前用的原生CSS媒体查询会误判小屏笔记本，且部分iPad（比如iPad Pro）不在max-width:767px范围内，导致样式失效。利用current-device的设备检测能力，给<html>标签动态添加设备类，再配合CSS就能精准锁定样式。

1. 编写JS逻辑添加设备与方向类

// 检测设备类型，给html添加对应类
if (device.mobile()) {
  document.documentElement.classList.add('is-mobile');
} else if (device.tablet()) {
  document.documentElement.classList.add('is-tablet');
}

// 监听屏幕方向变化，更新方向类
function updateOrientationClass() {
  const isLandscape = window.matchMedia("(orientation: landscape)").matches;
  document.documentElement.classList.toggle('is-landscape', isLandscape);
}

// 页面加载时初始化一次
updateOrientationClass();
// 监听方向变化事件
window.addEventListener('orientationchange', updateOrientationClass);

2. 编写对应CSS样式

去掉容易误判的宽度媒体查询，直接通过设备类+方向类锁定样式：

/* 移动端横屏时强制转为竖屏显示 */
.is-mobile.is-landscape html {
  transform: rotate(-90deg);
  transform-origin: left top;
  width: 100vh;
  overflow-x: hidden;
  position: absolute;
  top: 100%;
  left: 0;
}

/* iPad横屏时强制转为竖屏显示 */
.is-tablet.is-landscape html {
  transform: rotate(-90deg);
  transform-origin: left top;
  width: 100vh;
  overflow-x: hidden;
  position: absolute;
  top: 100%;
  left: 0;
}

二、current-device的CONDITIONAL CSS功能用法 #

这个功能可以让模块自动帮你生成设备与方向相关的CSS类，不用手动写JS添加：

1. 初始化模块时开启该功能：

device.init({
  conditionalCSS: true
});

2. 开启后，模块会自动给<html>标签添加mobile、tablet、landscape、portrait等类，直接在CSS里使用这些类即可：

/* 移动端横屏样式 */
.mobile.landscape html {
  /* 你的竖屏锁定样式 */
}

/* iPad横屏样式 */
.tablet.landscape html {
  /* 你的竖屏锁定样式 */
}

模块会自动处理设备检测和屏幕方向变化的类更新，省去手动写监听逻辑的麻烦。

注意事项 #

• 确保current-device模块已正确引入并初始化，避免在DOM未加载完成时执行检测代码。
• device.tablet()能精准识别所有iPad型号，包括大屏iPad Pro，不会像宽度媒体查询那样出现遗漏。

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