h5移动端音频播放器横屏全屏皮肤需用screen.orientation api与媒体查询双重检测方向，动态切换css类名，并设置fixed全屏样式及禁用滚动。
在 H5 中实现移动端音频播放器横屏时切换为全屏皮肤，核心是利用 CSS 媒体查询监听设备方向变化，并结合 JavaScript 检测横屏状态来动态切换 UI 样式或 DOM 结构。纯 CSS 无法监听 orientation 变化（尤其 iOS Safari 对 orientation 媒体特性支持有限），所以需 JS 配合。
用 screen.orientation + 媒体查询双重判断横屏
iOS 和 Android 新版本均支持 screen.orientation API，比监听 window.resize 更精准可靠：
- 监听
screen.orientationchange事件（iOS Safari、Chrome Android 支持） - fallback 到
window.matchMedia('(orientation: landscape)')监听媒体查询变化 - 初始加载时也需主动检查一次方向，避免首屏不生效
CSS 媒体查询定义横屏皮肤样式
推荐使用 min-width + orientation 组合，提高兼容性：
@media screen and (min-width: 768px) and (orientation: landscape) {
.audio-player { height: 100vh; }
.audio-player--fullscreen { display: flex; flex-direction: column; }
.audio-player__cover { width: 100%; height: 60vh; }
.audio-player__controls { padding: 20px; }
}
注意：仅靠 (orientation: landscape) 在部分安卓浏览器中可能失效，加 min-width 可规避误触发（如小屏横置但实际宽度仍很小）。
JavaScript 动态切换皮肤类名
不依赖第三方库，用原生 JS 控制 UI 状态：
const player = document.querySelector('.audio-player');
const updateOrientation = () => {
const isLandscape = window.matchMedia('(orientation: landscape)').matches;
if (isLandscape && screen.width > screen.height) {
player.classList.add('audio-player--fullscreen');
} else {
player.classList.remove('audio-player--fullscreen');
}
};
// 初始化
updateOrientation();
// 监听变化
window.addEventListener('orientationchange', updateOrientation);
window.addEventListener('resize', () => {
// 防抖，避免频繁触发
clearTimeout(window.orientationTimer);
window.orientationTimer = setTimeout(updateOrientation, 100);
});
补充说明：iOS Safari 在横屏时会自动放大页面，建议在 中添加：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
适配 iOS 全屏播放的特殊处理
若希望点击播放按钮后直接进入系统级全屏（类似视频），音频需满足：
– 使用 <audio></audio> 标签且有 webkit-playsinline 属性（禁用默认全屏）
– 但 iOS 不支持音频真正“全屏”，所谓“全屏皮肤”本质是自定义 UI 占满视口，需手动设置：
- 横屏时给
.audio-player添加position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; - 隐藏原生控件：
controls="false"，所有按钮用自定义 DOM 实现 - 横屏状态下禁用 body 滚动：
document.body.style.overflow = 'hidden'
