二合一设备HTML函数工具旋转适配需四步：一、监听orientation事件并重绘布局；二、用screen.orientation API配合matchMedia；三、强制transform+viewport缩放联动；四、采用CSS Container Queries替代媒体查询。
如果您在二合一设备上使用HTML函数工具时发现界面无法随设备旋转自动适配，导致按钮错位、文字截断或交互区域失灵，则可能是由于HTML未正确监听屏幕方向变化或CSS视口单位未适配动态尺寸。以下是实现旋转适配的具体操作步骤：
一、监听window.orientation并动态重绘布局
该方法通过JavaScript捕获设备原生orientation事件，在横竖屏切换时触发DOM结构调整与样式重载，适用于Chrome Android及部分Windows 10/11触控模式下的Edge浏览器。
1、在HTML文件的<head>中添加viewport元标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。
2、在<script>标签内插入orientation监听代码：window.addEventListener('orientationchange', function() { document.body.className = (window.orientation === 90 || window.orientation === -90) ? 'landscape' : 'portrait'; });。
立即学习“前端免费学习笔记（深入）”；
3、在CSS中定义对应类名样式：.landscape { width: 100vh; height: 100vw; } .portrait { width: 100vw; height: 100vh; }。
二、使用screen.orientation API配合matchMedia
该方案利用现代浏览器提供的screen.orientation接口获取精确方向状态，并结合CSS媒体查询实现毫秒级响应，兼容Windows 10/11 Surface系列及Chrome 88+、Firefox 75+。
1、检查API可用性：if ('orientation' in screen) { screen.orientation.addEventListener('change', handleOrientation); }。
2、定义handleOrientation函数：function handleOrientation() { const angle = screen.orientation.angle; document.documentElement.setAttribute('data-angle', angle); }。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
3、在CSS中使用属性选择器匹配：html[data-angle="0"], html[data-angle="180"] { --base-dir: portrait; } html[data-angle="90"], html[data-angle="270"] { --base-dir: landscape; }。
三、强制CSS transform + viewport缩放联动
针对老旧WebView内核（如Electron 13以下或某些UWP封装应用），直接修改CSS transform属性可绕过渲染引擎方向识别缺陷，确保函数按钮与输入框始终正向显示。
1、为根容器添加固定transform：#app { transform: rotate(0deg); transform-origin: center; }。
2、绑定resize事件并计算旋转角度：window.addEventListener('resize', () => { const isLandscape = window.innerWidth > window.innerHeight; document.getElementById('app').style.transform = isLandscape ? 'rotate(90deg)' : 'rotate(0deg)'; });。
3、同步调整viewport缩放比例：document.querySelector('meta[name="viewport"]').setAttribute('content', isLandscape ? 'width=1024, initial-scale=0.5' : 'width=768, initial-scale=1');。
四、采用CSS Container Queries替代媒体查询
当HTML函数工具以嵌入式iframe形式运行于二合一设备主应用中时，父容器尺寸变化比屏幕方向更可靠，Container Queries可基于容器宽高比触发样式切换，避免依赖全局屏幕事件。
1、为工具外层容器设置container-type：<div class="tool-container" style="container-type: inline-size;"></div>。
2、在CSS中编写容器查询规则：@container (min-width: 600px) { .func-btn { padding: 12px 24px; } } @container (max-width: 599px) { .func-btn { padding: 8px 16px; font-size: 14px; } }。
3、确保工具内部所有函数调用组件均使用rem或ch单位，而非px固定值：button { width: 12rem; height: 3rem; }。
