嘿，我完全懂你遇到的这个100vh适配问题——iOS Chrome的底部工具栏确实会搞乱视口计算，没真机的话确实头疼。给你几个实用的方法，亲测有效：

方法1：Chrome DevTools手动调整视口高度模拟工具栏占用 #

Chrome的设备模拟虽然默认不显示工具栏，但我们可以手动模拟它占用的空间：

• 打开DevTools，切换到设备工具栏（那个手机图标），选择任意iPhone型号（比如iPhone 14）。
• 此时默认的视口高度是设备的全高，但iOS Chrome的底部工具栏大概会占用44px左右的空间。你可以直接在视口尺寸的高度输入框里减去这个数值（比如把852px改成808px），这样就能模拟出工具栏存在时的实际可用视口高度。
• 另外，你可以在控制台输入window.innerHeight，对比100vh对应的高度（可以用document.documentElement.clientHeight查看），就能直观看到两者的差异——这正是iOS上100vh布局出问题的核心原因。

方法2：用Xcode模拟器+Safari开发者工具真实模拟 #

这个方法能还原最真实的iOS Chrome环境：

• 如果你用的是Mac，安装Xcode后，打开里面的Simulator（模拟器），选择你要测试的iPhone型号。
• 在模拟器里打开App Store，下载安装Chrome浏览器，然后打开你的测试网站。
• 打开Mac上的Safari，在偏好设置的「高级」里勾选「在菜单栏中显示“开发”菜单」。
• 点击菜单栏的「开发」，就能看到模拟器里的Chrome选项，点击进去后就能像用DevTools一样调试，此时你能看到真实的底部工具栏，以及它对视口和布局的影响。

方法3：临时添加模拟工具栏快速验证修复 #

如果你只是想快速验证自己的修复方案（比如用100dvh或者env(safe-area-inset-bottom)），可以临时在页面里加一个模拟工具栏的元素：

• 在页面底部添加一个固定定位的div：

.fake-ios-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background: #fff;
  border-top: 1px solid #eee;
}

• 这样页面底部就会多出一个和iOS Chrome工具栏高度差不多的元素，你可以直接测试布局是否会被它遮挡，或者你的适配代码是否能正确避开这个区域。

针对你提到的100vh问题，额外提一句：现在很多现代浏览器已经支持100dvh（动态视口高度），它会自动排除浏览器工具栏占用的空间，比100vh更适合移动端布局。你可以在模拟环境里直接替换测试，看看效果是否符合预期。

备注：内容来源于stack exchange，提问作者sir-haver