折叠屏html函数工具适配需协同viewport、screen.orientation与dom尺寸：一、用orientationchange+visibilitychange双重校验折叠态；二、用matchmedia替代resize监听；三、设viewport-fit=cover并禁用scrollto；四、动态设置rem基准适配ppi差异。
如果您在折叠屏手机上运行基于 HTML 的函数工具（如表单验证、动态计算、DOM 操作类脚本），发现布局错乱、事件响应异常或视口尺寸识别失准，则问题很可能源于折叠状态切换时 viewport、screen.orientation 与 DOM 尺寸计算的协同失效。以下是针对该问题的多种适配方案：
一、监听 screen.orientation 与 visibilityState 组合判断折叠态
单纯依赖 window.innerWidth 容易在开合动画中捕获到中间过渡值，造成误判；必须结合屏幕方向类型和文档可见性状态进行双重校验，确保函数工具只在稳定显示状态下执行核心逻辑。
1、在页面初始化时注册 orientationchange 事件监听器。
2、添加 document.addEventListener('visibilitychange', () => { ... }) 监听 prerender/hidden 状态。
3、当 screen.orientation.type 匹配 "landscape-primary" 且 document.visibilityState === "visible" 时，判定为内屏展开态并启用宽屏函数分支。
4、当 screen.orientation.type 为 "portrait-primary" 且 window.innerWidth
二、使用 visualViewport API 动态绑定函数触发时机
visualViewport 提供了当前可视区域的真实尺寸与缩放信息，比 window.innerWidth 更可靠；HTML 函数工具需在其 resize 事件中重新计算元素位置与交互热区，避免因折叠导致的坐标偏移。
1、检查浏览器是否支持 visualViewport：if ('visualViewport' in window) { ... }。
2、调用 visualViewport.addEventListener('resize', handleViewportResize) 绑定处理函数。
3、在 handleViewportResize 中调用函数工具的 recomputeLayout() 方法。
4、对涉及 touchstart/mousedown 的函数，将事件监听器挂载到 visualViewport.element 而非 document.body，确保坐标系一致性。
三、采用 CSS screen-spanning 媒体查询驱动函数行为分支
Chromium 119+ 支持 screen-spanning: single-fold-horizontal 等原生折叠媒体特征，可作为 CSS 与 JS 行为联动的信号源；HTML 函数工具应通过 window.matchMedia 查询结果决定是否启用分栏计算、双屏同步等高级能力。
1、定义媒体查询对象：const mq = window.matchMedia('(screen-spanning: single-fold-horizontal)')。
ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键
2、在 mq.addEventListener('change', e => { if (e.matches) { enableDualPanelMode(); } }) 中启用双屏函数模块。
3、对依赖 aspect-ratio 的函数（如视频比例校验），改用 @media (aspect-ratio >= 2/1) 而非固定像素断点。
4、禁用所有基于 resize 事件轮询 window.innerWidth 的旧式适配函数，全部替换为 matchMedia 监听方案。
四、强制 viewport-fit=cover 并拦截初始缩放干扰
折叠屏浏览器默认可能应用非覆盖式 viewport 渲染，导致函数工具获取的 clientWidth 与实际可用宽度不一致；添加 viewport-fit=cover 可使 CSS 视口完全贴合物理屏幕，消除安全区裁剪干扰。
1、在
中插入：。2、在 DOMContentLoaded 后立即执行 document.documentElement.style.scale = '1'，防止系统缩放影响函数内部尺寸计算。
3、对所有使用 getBoundingClientRect() 的函数，包裹 try-catch 并在捕获错误后 fallback 到 visualViewport.getBoundingClientRect()。
4、禁止在函数中调用 window.scrollTo(0, 0) 或 document.body.scrollTop = 0，此类操作会中断折叠动画连贯性。
五、基于 rem 的动态根字体重设以匹配折叠态密度变化
Pixel Fold 外屏 PPI 与内屏差异显著，固定 px 值会导致函数生成的 UI 元素在不同态下视觉比例失调；通过 JS 动态设置 html 元素 font-size，可使所有 rem 单位函数输出自动适配当前屏幕密度与尺寸。
1、定义基础 rem 基准：const baseRem = 16;
2、根据 visualViewport.width 与 devicePixelRatio 计算当前 scale：const scale = Math.min(visualViewport.width / 375, devicePixelRatio);
3、设置 document.documentElement.style.fontSize = `${baseRem * scale}px`。
4、所有涉及尺寸判断的函数（如按钮点击热区校验、输入框高度计算）必须使用 getComputedStyle(document.documentElement).fontSize 获取实时 rem 值，不得硬编码 16px 或 1rem。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
