高度使用的iframe VH的不移动和桌面

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单位和iFrames不兼容，Colorbox或其他的错误。 （请注意，这个问题不会出现在检查 - 只有在实际的移动设备）

Answer 1

使用mobile safari inspector直接看到发生了什么事在移动我计算出后，将溶液补充：

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

这使Colorbox识别适当的高度。然而，我则需要添加媒体查询谁不需要溢出桌面浏览器（增加了额外的滚动条，如果他们在那里）：

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

将需要此滚动按预期方式工作 - 我最近找不到任何东西来告诉我有更好的方法来做到这一点？

-webkit-overflow-scrolling: touch;