HTML响应式模板如何处理不同屏幕方向-html教程-PHP中文网

@media (orientation: portrait) 和 @media (orientation: landscape) 是唯一稳定可靠的横竖屏检测方案，因 window.orientation、orientationchange、resize 等 JS 方案在现代浏览器中已失效或误判频发，而 CSS 媒体查询语义准确、无干扰、兼容性好。

html响应式模板如何处理不同屏幕方向

直接用 @media (orientation: portrait) 和 @media (orientation: landscape) 就够了，其他方式要么失效、要么不可靠。

为什么别碰 `window.orientation` 和 `orientationchange`

这两个 API 在 Safari 16.4+、Chrome 95+ 等主流浏览器中已完全不触发 —— 监听了也收不到事件。iOS 上 orientationchange 早就不工作，Android Chrome 行为也不一致，实际项目里等于摆设。

window.orientation 返回值在现代浏览器中恒为 0 或 undefined，无法区分方向
screen.orientation 虽能读取当前朝向（如 "portrait-primary"），但无法监听变化，且首次访问需用户点击等交互才可能启用
依赖 resize 事件判断宽高交换，容易误判：键盘弹出、缩放、甚至 iOS 滚动抖动都会触发 resize，导致布局反复切换

`@media (orientation: ...)` 是唯一稳定方案

CSS 媒体查询里的 orientation 是浏览器原生支持的语义化检测，只在真正横竖屏切换时生效，不受缩放、滚动、软键盘干扰，兼容性覆盖所有现代移动端和桌面浏览器。

它基于设备的逻辑方向，不是单纯比较 window.innerWidth 和 window.innerHeight
无需 JavaScript，纯 CSS 即可完成表单字段堆叠/并排、导航栏折叠/展开等常见方向适配
示例：竖屏时让两个按钮上下排列，横屏时左右对齐

.form-actions {
  display: flex;
  flex-direction: column;
}
@media (orientation: landscape) {
  .form-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}

配合 `matchMedia` 做 JS 侧响应

如果必须在 JS 中响应方向变化（比如触发动画、加载不同资源），用 matchMedia 替代 resize 节流方案，更精准、无抖动。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

matchMedia('(orientation: landscape)') 返回的 MediaQueryList 对象支持 addEventListener('change', ...)
它和 CSS 中的写法语义一致，不会因视口微小变化误触发
注意：首次调用需确保 DOM 已就绪，且不要在未挂载元素上提前监听

示例：

const mql = matchMedia('(orientation: landscape)');
const handleOrientationChange = (e) => {
  if (e.matches) {
    console.log('进入横屏');
  } else {
    console.log('回到竖屏');
  }
};
mql.addEventListener('change', handleOrientationChange);
// 初始状态也要检查一次
handleOrientationChange(mql);

真正容易被忽略的是：orientation 媒体查询对“可折叠设备”（如 Galaxy Z Fold）或“分屏模式”不敏感 —— 它只认系统报告的设备方向，不是窗口尺寸。这类场景得结合 screen.width / screen.height 或更细粒度的 @media (min-aspect-ratio: 1/1) 来兜底。