针对你遇到的这两个问题，我结合Web开发的实际实践，给你具体的解决方案，分两部分来说：

核心思路是先精准区分移动端（Android/iOS）和桌面端，再判断当前设备是否处于目标分辨率范围，最后应用横屏样式，避免桌面端小窗口误触发。

1. 设备与分辨率检测方案 #

推荐结合两种方式提高准确性：

• 用navigator.userAgent识别Android/iOS设备
• 用媒体查询(pointer: coarse)判断触摸设备（桌面端鼠标是fine，移动端触摸是coarse），再叠加分辨率范围判断

2. 具体实现代码 #

第一步：设置视口（HTML头部）

先锁定视口，避免缩放导致的分辨率判断误差：

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

第二步：CSS横屏样式

定义横屏专用类，通过媒体查询或JS控制添加：

.force-landscape {
  /* 旋转90度，以左上角为原点 */
  transform: rotate(90deg);
  transform-origin: top left;
  /* 旋转后互换宽高，适配屏幕 */
  width: 100vh;
  height: 100vw;
  overflow-x: hidden;
  position: absolute;
  top: 100%;
  left: 0;
}

第三步：JS动态控制（精准区分设备）

// 判断是否为Android/iOS移动端
function isMobile() {
  const userAgent = navigator.userAgent.toLowerCase();
  // 排除Windows Phone等非目标移动端
  return /android|iphone|ipad|ipod/.test(userAgent) && !/windows phone|blackberry/.test(userAgent);
}

// 判断是否处于目标分辨率范围（替换成你的阈值，比如宽度<=768px）
function isInTargetResolution() {
  return window.innerWidth <= 768;
}

// 应用/移除横屏样式
function toggleLandscape() {
  if (isMobile() && isInTargetResolution()) {
    document.body.classList.add('force-landscape');
  } else {
    document.body.classList.remove('force-landscape');
  }
}

// 初始化检测
toggleLandscape();

// 监听窗口大小变化（比如手机旋转）
window.addEventListener('resize', toggleLandscape);

如果想更简洁，也可以用媒体查询直接控制样式，避免JS：

/* 仅针对移动端+目标分辨率 */
@media only screen and (max-width: 768px) and (pointer: coarse) {
  body {
    transform: rotate(90deg);
    transform-origin: top left;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

思路和上面一致：先确认是Android/iOS移动端且符合分辨率条件，再执行跳转，同时避免循环跳转。

具体实现代码 #

// 复用之前的检测函数
function shouldRedirect() {
  const isMobile = /android|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) && !/windows phone|blackberry/.test(userAgent);
  const isInResolutionRange = window.innerWidth <= 768; // 替换成你的分辨率条件
  return isMobile && isInResolutionRange;
}

// 执行跳转，避免循环跳转
if (shouldRedirect() && !window.location.pathname.includes('/mobile-specific-page')) {
  // 替换成你的移动端目标页面URL
  window.location.href = '/mobile-specific-page';
}

// 监听分辨率变化（比如用户旋转手机后触发）
window.addEventListener('resize', () => {
  if (shouldRedirect() && !window.location.pathname.includes('/mobile-specific-page')) {
    window.location.href = '/mobile-specific-page';
  }
});

也可以用媒体查询API实现，更简洁：

const mobileQuery = window.matchMedia('(max-width: 768px) and (pointer: coarse)');

function handleRedirect(e) {
  if (e.matches && !window.location.pathname.includes('/mobile-specific-page')) {
    window.location.href = '/mobile-specific-page';
  }
}

// 初始检测
handleRedirect(mobileQuery);
// 监听媒体查询变化
mobileQuery.addEventListener('change', handleRedirect);

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