如何修复媒体查询，实现安卓与iOS移动端横屏检测？

原有的媒体查询可在安卓移动端检测横屏，但在iOS设备（iPhone、iPad）上无法生效，以下是优先基于设备特性检测的适配方案，避免依赖min/max-device-width：

修改后的媒体查询代码 #

@media (first_media_query) or 
       ((orientation: landscape) and (pointer: coarse)) or 
       ((aspect-ratio > 1) and (hover: none) and (-webkit-touch-callout: default))

代码说明 #

• 保留安卓适配逻辑：((orientation: landscape) and (pointer: coarse))
  • orientation: landscape 是标准的横屏状态检测属性
  • pointer: coarse 匹配触摸设备的粗指针（手指触摸操作），安卓设备可正确识别该特性
• 新增iOS适配逻辑：((aspect-ratio > 1) and (hover: none) and (-webkit-touch-callout: default))
  • aspect-ratio > 1 确保视口宽度大于高度，补充orientation在iOS特殊场景（如分屏）下的判断偏差
  • hover: none 标识设备不支持鼠标hover操作，符合iOS触摸设备的特性
  • -webkit-touch-callout: default 利用iOS特有的WebKit私有属性，精准匹配iOS触摸设备

补充优化 #

如果需要更严谨的横屏判断，也可以将orientation: landscape与iOS特性检测直接结合，进一步提升兼容性：

@media (first_media_query) or 
       ((orientation: landscape) and (pointer: coarse)) or 
       ((orientation: landscape) and (hover: none) and (-webkit-touch-callout: default))

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