html5中meta viewport标签无法动态修改，必须静态预设在head中；横竖屏适配靠css媒体查询和js事件监听；禁用缩放应采用可访问方案而非user-scalable=no；其他meta标签如description、theme-color等可动态更新。
HTML5 中的 meta 标签本身不支持动态调整 viewport 行为——一旦页面开始解析，浏览器就已读取并锁定 <meta name="viewport"> 的值，后续用 JavaScript 修改它完全无效。所谓“动态调整”，实际是指在不同业务场景下，提前配置好适配逻辑，或通过其他手段实现视觉/交互层面的响应效果，而非真去改 meta 标签。
下面分几种典型业务需求，说明怎么做才真正有效：
viewport 不能动态改，但可以按需预设
有些业务需要“横屏全屏”“竖屏表单”“Kiosk 模式”等不同视口策略。这时不能等页面加载完再 JS 插入 meta，而应在服务端或构建时根据 URL 参数、UA、设备类型等，生成对应版本的 HTML：
- 用户进入自助终端页 → 模板中直接输出：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 普通用户访问 → 输出标准安全版：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ 关键：所有 viewport 配置必须静态写在
最前面，且只出现一次。
横竖屏切换时的“视觉适配”靠 CSS + JS，不是改 meta
比如横屏时隐藏侧边栏、放大图表，竖屏时恢复导航栏——这属于 UI 布局响应，应使用：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 媒体查询监听方向：
@media (orientation: landscape) { .sidebar { display: none; } .chart { width: 100vw; height: 80vh; } } - 或 JS 监听
resize/orientationchange事件：window.addEventListener('orientationchange', () => { document.body.classList.toggle('landscape', screen.orientation.angle === 90); });
⚠️ 注意：不要试图用
document.querySelector('meta[name=viewport]').setAttribute(...)来“切换”，它对渲染无任何影响。
禁用缩放？别碰 user-scalable=no，改用可访问方案
金融类表单、考试系统常要求“禁止缩放”，但硬加 user-scalable=no 已被 iOS 16.4+ 忽略，且违反 WCAG 2.1。更稳妥的做法是：
- 保持
user-scalable=yes（默认行为） - 对关键输入框启用
touch-action: manipulation，提升点击精度 - 提供页面内字号调节按钮（如
html { font-size: clamp(14px, 1.2rem, 18px); }+ CSS 自定义属性控制） - 配合
@media (prefers-reduced-motion)和高对比模式支持
其他 meta 标签可动态更新（但 viewport 不行）
以下 meta 标签可在运行时安全修改，适用于业务状态变化：
- 页面标题和描述（影响分享卡片）：
document.querySelector('meta[name="description"]').content = "订单已提交，预计30分钟送达"; document.title = "订单成功 - XX外卖"; - 主题色（Chrome/Edge 地址栏）：
document.querySelector('meta[name="theme-color"]').content = "#ff6b35"; - Open Graph 标签（微信/钉钉分享）：
document.querySelector('meta[property="og:title"]').content = "我的拼团已成！";
这些修改会影响后续分享行为，但不会改变页面布局或缩放逻辑。
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
