使用vh的iframe高度在移动和桌面之间不一样

Question

在this gallery page上设置iframe样式：

iframe {width:100vw;height:84.5vh;}

@media screen and (min-width: 600px) and (max-width: 999px) {
    iframe {width:100vw;height:81.5vh;}
}

@media screen and (min-width: 1000px) { 
    iframe {width:100vw;height:77.5vh;}
}

Colorbox用于显示较大版本的图像。我假设Colorbox将图像定位在窗口中间。 Colorbox在桌面上运行良好，但在移动设备上似乎对iframe的高度以及在列表中显示的大图像有不同的理解。

我不确定它是否与vh单位和iFrame不兼容，这是Colorbox或其他方面的错误。 （请注意，此问题不会出现在检查器中 - 仅在实际的移动设备上显示）

Answer 1

使用mobile safari inspector直接查看移动设备上发生的情况后，解决方法是添加：

replaceOccurrences(of:with:)

这使Colorbox识别出合适的高度。但是，我需要为不需要溢出的桌面浏览器添加媒体查询（如果它们在那里则添加额外的滚动条）：

body, html {    
 overflow: scroll;
 height: 100vh;
}

滚动需要这个按预期工作 - 我最近找不到任何东西告诉我有更好的方法吗？

@media screen and (min-width: 1000px) {
  body, html {overflow: auto;}
}