interactive-widget 不是 viewport meta 标签的合法属性，所有浏览器都忽略它；viewport 仅支持 width、height、initial-scale、minimum-scale、maximum-scale、user-scalable 和 viewport-fit 等标准属性。
viewport 里根本没有 interactive-widget 属性
直接说结论：interactive-widget 不是 viewport meta 标签的合法属性，所有浏览器都忽略它。你在 HTML 里写 <meta name="viewport" content="interactive-widget=..."> 不会产生任何效果，也不会报错——只是白写。
你可能实际想控制的是 iOS Safari 的地址栏/工具栏行为
iOS Safari（尤其是 iOS 15+）在 PWA 或全屏模式下会隐藏地址栏，但用户滚动时又可能唤出“交互式工具栏”（比如底部地址栏、刷新按钮等），这个行为常被误称为 “interactive widget”。它不由 viewport 控制，而是由以下机制决定：
-
display: standalone或display: minimal-ui（后者已废弃）在 Web App Manifest 中启用，才可能触发全屏体验 - 用户是否将网页“添加到主屏幕”，且系统是否允许该站点以 PWA 模式运行
- iOS 系统版本和 Safari 设置（例如“显示地址栏”开关）有强干预权
-
viewport中的height=device-height或interactive-widget这类值完全无效，不会影响工具栏显隐
viewport 支持的合法属性只有这几个
标准 viewport content 值是键值对组成的逗号分隔字符串，只认这些关键词（大小写不敏感）：
-
width（常用值：device-width） -
height（极少用，device-height多数情况下被忽略） initial-scale-
minimum-scale/maximum-scale -
user-scalable（yes/no） -
viewport-fit（仅 iOS，用于适配刘海屏，值为contain或cover）
例如正确写法：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">。加任何未定义字段（如 interactive-widget）等于没写。
真要优化 iOS 工具栏交互，得靠 manifest + CSS + JS 组合
如果你的目标是让页面在 iOS 上更接近原生体验（比如减少工具栏干扰），需要三件套配合：
- 一个有效的
manifest.json，含"display": "standalone"和"orientation": "portrait" - HTML 中引用它：
<link rel="manifest" href="/manifest.json"> - CSS 里用
env(safe-area-inset-bottom)避免内容被底部工具栏遮挡：padding-bottom: env(safe-area-inset-bottom); - JavaScript 监听
scroll或resize事件判断工具栏是否展开（iOS 不提供直接 API，只能靠window.innerHeight变化间接推测）
单独改 viewport 标签解决不了这个问题——它根本不是设计来管这个的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
