移动端响应式横竖屏适配问题及通用Media Query写法、禁用横屏方案咨询

你当前使用的媒体查询因为固定了设备宽度区间和像素比参数，仅能匹配特定规格的iPhone设备，无法覆盖全品类移动设备。

不需要绑定具体设备的硬件参数，通过orientation参数即可判断横竖屏，搭配宽度阈值实现全移动端适配：

/* 适配所有移动端竖屏，阈值可根据是否包含平板调整 */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  /* 竖屏样式 */
}

/* 适配所有移动端横屏 */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  /* 横屏样式 */
}

如果需要同时适配平板设备，可将最大宽度阈值调整为1024px。

• 优先用相对单位：布局尺寸优先使用vw/vh、rem、百分比等相对单位，横竖屏切换时会自动跟随视口尺寸缩放，无需额外写媒体查询适配
• 使用弹性布局：采用Flex、Grid弹性布局替代固定宽度的传统布局，容器设置max-width限制最大宽度，不要写死固定像素宽度
• 差异化样式单独适配：仅在横竖屏切换时需要特殊调整的元素，通过带orientation参数的媒体查询单独覆盖样式即可

网页端无法直接强制操作系统禁止横屏，可通过两种方案实现类禁用效果：

1. 横屏提示引导
   横屏时显示引导用户切回竖屏的遮罩，隐藏页面主内容，代码示例：

/* 竖屏时隐藏提示 */
.landscape-tip {
  display: none;
}
/* 横屏时显示提示，隐藏主内容 */
@media (orientation: landscape) {
  .landscape-tip {
    display: flex;
    position: fixed;
    inset: 0;
    background: #000;
    color: #fff;
    align-items: center;
    justify-content: center;
    z-index: 99999;
  }
  .page-content {
    display: none;
  }
}

2. 强制旋转页面模拟竖屏
   横屏时将整个页面旋转90度，视觉上保持竖屏显示效果，代码示例：

@media (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

注意该方案在部分低版本安卓设备上可能出现滚动条偏移问题，可根据业务场景做兼容调整。

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