HTML移动端适配怎么在折叠屏手机的展开状态下动态调整视口-H5教程-PHP中文网

最可靠的方式是使用 visualviewport 实时读取真实可视区域，它反映用户此刻真正能看到的像素尺寸，不受折叠状态、面板激活与否影响；visualviewport.width 和 height 在 chrome 61+/edge 79+ 可用，safari 需降级兜底，并配合 ua 检测与屏幕方向动态添加布局类名。

html移动端适配怎么在折叠屏手机的展开状态下动态调整视口

折叠屏手机展开状态下，视口不是简单变宽，而是变成一个“逻辑上连续但物理上分屏”的区域。直接靠 width=device-width 或媒体查询 (min-width: 1200px) 会误判——比如 Surface Duo 展开后 window.innerWidth 是 1440px，但实际渲染被系统切为左右两个 720px 区域；Fold 设备单侧使用时，screen.width 显示 2260px，可用户只看到一侧，visualViewport.width 才是真实可见宽度。

用 visualViewport 实时读取真实可视区域

这是目前最可靠的方式，它反映用户此刻真正能看到的像素尺寸，不受折叠状态、面板激活与否影响：

visualViewport.width 和 visualViewport.height 在 Chrome 61+ / Edge 79+ 中可用（Safari 尚不支持，需降级兜底）
监听 visualViewport.addEventListener('resize', handler)，比 window.resize 更精准——它能捕获半展开、滑动过渡等中间态
示例：展开时若 visualViewport.width > 800px 且 visualViewport.height ，大概率是横屏双屏模式，可切换为双栏布局

结合 UA 和屏幕方向判断折叠状态

CSS 媒体查询无法感知折叠角度变化，必须靠 JS 主动识别：

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

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

下载

检查 navigator.userAgent 是否含 Fold、Duo、SC-51A 等关键词
配合 window.matchMedia('(display-mode: standalone)').matches 判断是否为 PWA 全屏运行（折叠设备常以此模式启用双屏优化）
再读取 screen.orientation.type（如 landscape-primary），确认当前方向是否支持横跨双屏

动态切换布局类，别依赖静态媒体查询

不要在 CSS 里写 @media (min-width: 1024px) { .grid { grid-template-columns: 2fr 1fr; } }——展开态满足条件，但用户可能只用左屏，强制双栏反而破坏体验：

JS 根据 visualViewport + 折叠判断结果，给动态添加类名，如 fold-open-lanscape 或 fold-single-panel
对应 CSS 写 body.fold-open-landscape .main-layout { display: grid; grid-template-columns: 1fr 1fr; }
关键点：所有双屏适配样式都基于这些动态类，而非纯宽度断点