html如何实现根据设备方向调整布局-html教程-PHP中文网

现代浏览器中应使用 matchmedia 监听横竖屏，因其精准、无抖动、兼容性好；纯样式调整优先用 css @media (orientation: ...) 实现。

html如何实现根据设备方向调整布局

监听 `window.orientation` 已失效，改用 `screen.orientation` 或 `resize` 事件

在现代浏览器中，window.orientation 已被废弃（Safari 16.4+、Chrome 95+ 等均不触发），直接监听它会导致回调从不执行。真实可用的方式只有两个：screen.orientation API（需用户手势触发、仅部分安卓/桌面 Chrome 支持）和更通用的 resize 事件配合宽高比判断。

实际开发中几乎全部依赖 resize：设备旋转时视口尺寸变化，window.innerWidth 和 window.innerHeight 会交换或显著改变，这是最稳定、兼容性最好的信号。

不要写 window.addEventListener('orientationchange', ...) —— 它在 iOS Safari 中早已不触发，在 Android Chrome 中行为不可靠
screen.orientation 可读取当前朝向（screen.orientation.type 返回 "portrait-primary"、"landscape-secondary" 等），但无法监听变化，且首次访问需用户交互（如点击）才能启用监听
用 resize 时注意节流：高频触发（尤其 iOS 滚动+旋转混合场景），建议用 setTimeout 防抖，延迟 100–150ms 再执行布局逻辑

用 `matchMedia` 监听横竖屏，比 `resize` 更精准、无抖动

matchMedia 是目前最推荐的方式，它基于 CSS 媒体查询语法，原生支持 (orientation: portrait) 和 (orientation: landscape)，且只在真正发生方向切换时触发，不会因缩放、滚动、键盘弹出误判。

它不依赖尺寸数值比较，也不受 viewport 缩放影响，语义清晰、性能轻量。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

写法：const mql = window.matchMedia('(orientation: landscape)');
监听：mql.addEventListener('change', e => { if (e.matches) { /* 进入横屏 */ } else { /* 进入竖屏 */ } });
iOS Safari 从 12.2+、Chrome 74+、Firefox 69+ 全面支持，无需 polyfill
注意：首次调用 mql.matches 即可获取当前状态，不必等事件；但旧版 Safari（≤12.1）需用 mql.addListener()（已废弃但兼容）

纯 CSS 方案：用 `@media (orientation: ...)` 控制布局，避免 JS 干预

如果只是调整样式（比如隐藏某列、切换 flex-direction、修改 font-size），完全不需要 JS —— CSS 媒体查询就能搞定，更可靠、无白屏风险、利于 SSR。

关键点在于：orientation 媒体查询基于 viewport 的宽高关系，不是设备物理方向，因此在桌面浏览器缩放窗口时也会响应，符合预期。

示例：

@media (orientation: landscape) {
  .sidebar { display: block; }
  .content { width: calc(100% - 200px); }
}
@media (orientation: portrait) {
  .sidebar { display: none; }
  .content { width: 100%; }
}

注意：不要混用 min-width 等其他条件覆盖 orientation，否则逻辑易混乱；优先保证 orientation 规则粒度足够细
在 iOS 上，Safari 的地址栏收起/展开会临时改变 viewport 高度，可能触发一次 orientation 变化（极短时间），但通常不影响布局稳定性

真需要物理方向？用 `DeviceOrientation API` 但慎用

如果业务强依赖设备陀螺仪数据（如 AR、体感游戏），才考虑 DeviceOrientation，但它和“布局适配”是两回事：它返回的是 alpha/beta/gamma 角度值，不是简单的横/竖屏布尔值，且需用户授权、iOS 上默认禁用、Android 各厂商权限策略不一。

触发前必须有用户手势（如 click 或 touchstart），否则 requestPermission 会直接 reject
监听写法：window.addEventListener('deviceorientation', e => { console.log(e.beta, e.gamma); });
beta ≈ 前后倾斜角，gamma ≈ 左右倾斜角；仅当 |beta| 45° 才近似为横屏 —— 计算复杂、误差大、电池消耗高
绝大多数响应式布局场景下，这不是解决方案，而是过度设计

真正要落地的就两条路：CSS @media (orientation: ...) 覆盖 95% 样式需求；JS 用 matchMedia 处理需要动态加载模块、上报埋点或触发动画的少数场景。别碰 orientationchange，也别在没用户交互时试图读 screen.orientation —— 那些代码现在跑起来，大概率什么也不会发生。