HTML移动端适配怎么在横竖屏切换时动态调整页面的布局排版-H5教程-PHP中文网

横竖屏适配需 viewport、媒体查询与 javascript 协同：viewport 必设 width=device-width 和 initial-scale=1.0；媒体查询应组合 orientation 与尺寸条件，并优先用 dvh 替代 100vh；js 须用 matchmedia 监听，避免 orientationchange；字体用 clamp()，布局用 flex/grid 动态调整。

html移动端适配怎么在横竖屏切换时动态调整页面的布局排版

横竖屏切换时动态调整布局，不能只靠单一手段。核心是“viewport + 媒体查询 + JavaScript 监听”三者协同，缺一不可。单独用 @media (orientation: landscape) 很容易失效，尤其在 iOS Safari 和新版 Android Chrome 中。

viewport 标签必须写对

这是所有适配的前提。错写或漏写，后续样式和监听都白搭。

必须包含 width=device-width：否则浏览器按桌面宽度（如 980px）渲染，orientation 查询永远不触发
必须加 initial-scale=1.0：iOS Safari 不加这个会强制缩放，导致 100vh 计算失准
推荐完整写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
避免写死 width=375 这类固定值；也别让 JS 动态覆盖初始 meta 标签

媒体查询要组合判断，别只认 orientation

单纯依赖 orientation 不可靠——它只看宽高比，不看地址栏是否展开、折叠屏是否半开，实际中常漏触发。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

更稳妥的写法是叠加尺寸条件：
@media (orientation: landscape) and (min-aspect-ratio: 1280/720)
或直接响应高度变化：
@media (max-height: 480px) and (min-width: 640px)
横屏时 100vh 可能只剩 390px（如 iPhone 14），建议改用 dvh（Safari 16.4+ / Chrome 105+ 支持），降级用 min-height: 100% 配合 html, body { height: 100% }
Flex 布局不会自动翻转方向，flex-direction: column 在横屏下仍保持竖排，需手动改为 row

JavaScript 要用 matchMedia，别用 orientationchange

orientationchange 事件已被多个主流浏览器弃用或行为不稳定（iOS 15+ 快速旋转可能跳过，Android Chrome v79+ 仅读初始方向）。

正确做法是用 window.matchMedia 监听：

const media = window.matchMedia('(orientation: landscape)');<br>media.addEventListener('change', e => { if (e.matches) { /* 横屏逻辑 */ } });

首次加载时需手动检查：if (media.matches) { /* 初始化横屏状态 */ }
需要动态调整根字号、重排 DOM 或切换 class 的场景，都应在此回调中执行

字体与尺寸要用弹性单位防暴增

横屏下 4vw 字号可能翻倍，竖屏又太小，纯 vw/vh 容易失控。

字号推荐用 clamp() 锁定区间：
font-size: clamp(14px, 2.5vw, 16px);
容器宽度优先用 %、max-width 或 clamp(320px, 100%, 1200px)，避免固定 px
表单、表格等结构化内容，横屏可并排两列，竖屏改为单列堆叠，用 Flex/Grid + 媒体查询控制 flex-wrap 或 grid-template-columns

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！