Chrome 移动设备中的视口错误
Wrong viewport in Chrome mobile devices
我正在尝试制作响应式移动菜单，但在 Google Chrome 移动浏览器和其他浏览器的视口之间存在差异时遇到了一些问题。
请参阅下面的屏幕截图：
我用绿色绘制视口边框。这里的第一张图片是在 chrome 移动设备上制作的，第二张是在默认设备浏览器中制作的。在手机上 IOS 结果与上一张图片相同。
红色按钮，book the studio 固定为 bottom 0。而且必须一直在屏幕底部。
所以，问题是：
为什么 chrome 使视口高度比实际高度高？
处理此问题的最佳方法是什么？
设置视口元标记也没有帮助。
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0" />
有人能给点建议吗？
尝试使用以下 CSS
bottom: 0;
position: fixed;
不幸的是这是故意的……
这是一个众所周知的问题（至少在 safari 移动版中），这是有意为之的，因为它可以防止其他问题。 Benjamin Poulain 回复了一个 webkit 错误：
This is completely intentional. It took quite a bit of work on our
part to achieve this effect. :)
The base problem is this: the visible area changes dynamically as you
scroll. If we update the CSS viewport height accordingly, we need to
update the layout during the scroll. Not only that looks like shit,
but doing that at 60 FPS is practically impossible in most pages (60
FPS is the baseline framerate on iOS).
It is hard to show you the “looks like shit” part, but imagine as you
scroll, the contents moves and what you want on screen is continuously
shifting.
Dynamically updating the height was not working, we had a few choices:
drop viewport units on iOS, match the document size like before iOS 8,
use the small view size, use the large view size.
From the data we had, using the larger view size was the best
compromise. Most website using viewport units were looking great most
of the time.
Nicolas Hoizey 对此进行了大量研究：https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
未计划修复
此时，除了避免在移动设备上使用视口高度外，您无能为力。 Mobile Chrome 似乎也想对此进行调整，但不确定他们是否会跟进。
解决此问题的唯一方法是使用此代码段：
height: calc(100vh - 60px); 60px
其中 60px 是顶部导航高度，这可能因设备而异
我正在尝试制作响应式移动菜单，但在 Google Chrome 移动浏览器和其他浏览器的视口之间存在差异时遇到了一些问题。 请参阅下面的屏幕截图：
我用绿色绘制视口边框。这里的第一张图片是在 chrome 移动设备上制作的，第二张是在默认设备浏览器中制作的。在手机上 IOS 结果与上一张图片相同。 红色按钮，book the studio 固定为 bottom 0。而且必须一直在屏幕底部。 所以，问题是：
为什么 chrome 使视口高度比实际高度高？
处理此问题的最佳方法是什么？
设置视口元标记也没有帮助。
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0" />
有人能给点建议吗？
尝试使用以下 CSS
bottom: 0;
position: fixed;
不幸的是这是故意的……
这是一个众所周知的问题（至少在 safari 移动版中），这是有意为之的，因为它可以防止其他问题。 Benjamin Poulain 回复了一个 webkit 错误：
This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)
The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).
It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.
Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.
From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.
Nicolas Hoizey 对此进行了大量研究：https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
未计划修复
此时，除了避免在移动设备上使用视口高度外，您无能为力。 Mobile Chrome 似乎也想对此进行调整，但不确定他们是否会跟进。
解决此问题的唯一方法是使用此代码段：
height: calc(100vh - 60px); 60px
其中 60px 是顶部导航高度，这可能因设备而异