Chrome设备工具栏下CSS影响window.innerWidth/innerHeight值问题

这本质是Chrome设备模拟模式下的移动端视口适配逻辑在起作用，具体原因如下：

• Chrome移动端模拟的自动缩放机制：当你用设备工具栏模拟竖屏移动端（比如iPhone12）时，Chrome会复刻真实移动端浏览器的行为——如果页面中存在无法在当前视口内完整显示的内容（比如设置了font-size:48px的input，其默认的最小宽度/高度会超过模拟设备的视口尺寸），浏览器会自动放大viewport的缩放比例，确保内容不会被截断。这时候window.innerWidth和innerHeight返回的是缩放后的视口尺寸，而非你设定的原始设备分辨率，所以会出现比例正确但数值超出预期的情况。

• 横屏/桌面端无问题的原因：横屏设备（如Nest Hub）的视口宽度足够容纳48px字号的input，不会触发自动缩放；而常规Chrome窗口的竖屏预览是桌面端渲染逻辑，没有移动端这种“强制适配内容”的视口调整机制，所以尺寸计算正常。

• Firefox的差异处理：Firefox在设备模拟时不会强制缩放viewport来适配大尺寸元素，而是允许页面滚动，因此window.innerWidth/innerHeight能保持模拟设备的原始分辨率，但页面会因为内容超出视口出现滚动条。

验证与解决思路 #

• 验证：在Chrome设备工具栏中打开「更多工具→渲染」面板，查看视口相关选项，能看到当input设置48px字号时，viewport的缩放比例被自动调整了。
• 解决：
  1. 添加标准viewport meta标签：在页面头部加入<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，强制浏览器按照模拟设备的原始分辨率渲染，禁止自动缩放。
  2. 调整input样式：给input设置max-width: 100%，确保它不会超出视口宽度，避免触发浏览器的内容保护机制。

内容的提问来源于stack exchange，提问作者1ups_