Chrome移动设备中的错误视口

Question

我正在尝试制作具有响应性的移动菜单，并且在Google Chrome移动设备和其他浏览器中的视口之间遇到了一些问题。 请参见下面的屏幕截图：

通过绿色我绘制视口边框。这里的第一张图片是用chrome mobile制作的，第二张图片是默认的设备浏览器。在移动IOS上，结果与上一张图像相同。 红色按钮，预定工作室固定在底部0.它必须始终在屏幕的底部。 所以，问题是：

为什么chrome会使viwport高度大于它真正的高度？

处理此问题的最佳方式是什么？

设置视口元标记也无济于事。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0" />

有人可以建议吗？

Answer 1

不幸的是这是故意的......

这是一个众所周知的问题（至少在safari mobile中），这是故意的，因为它可以防止其他问题。 Benjamin Poulain回复了一个webkit错误：

  

这完全是故意的。我们花了相当多的工作   部分是为了达到这个效果。 ：）

     

基本问题是：可见区域会像您一样动态变化   滚动。如果我们相应地更新CSS视口高度，我们需要   滚动期间更新布局。不仅那看起来像狗屎，   但在大多数页面中，以60 FPS的速度执行此操作几乎是不可能的（60   FPS是iOS上的基线帧率。

     

很难向你展示“看起来像狗屎”的部分，但想象一下你   滚动，内容移动，你想要的在屏幕上是连续的   换档。

     

动态更新高度不起作用，我们有几个选择：   在iOS上删除视口单元，匹配iOS 8之前的文档大小，   使用小视图大小，使用大视图大小。

     

根据我们的数据，使用较大的视图大小是最好的   妥协。大多数使用视口单元的网站看起来都很棒   当时。

Nicolas Hoizey对此进行了相当多的研究：https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

没有计划修复

此时，除了避免在移动设备上使用视口高度之外，您无能为力。移动Chrome似乎也想要适应这一点，但不确定它们是否会贯彻执行。

解决此问题的唯一方法是使用此代码段：

height: calc(100vh - 60px); 60px

其中60px是最高导航高度，可能因设备而异

Answer 2

尝试使用以下CSS

for(unsigned int y(0); y != height; ++y)
{
    unsigned int sourceStart(y * width * 4);
    unsigned int destStart(y * ((width * 3 + 3) & 0xfffffffc) ); // align on 4 bytes
    for(unsigned int x(0); x != width; ++x)
    {
        for(unsigned int color(0); color != 3; ++color)
        {
            dst[destStart++] = src[sourceStart++];
        }
        ++sourceStart; // account for 4th byte in source
    }
}