水平图像库 - 空白：nowrap 搞砸最大高度：在 Firefox for Android 上为 100%

Question

我喜欢像这样构建水平布局、垂直安装的图片库：

<html style="height: 100%">
   <body style="height: 100%">
      <div class="someContainer" style="height: 100%">
         <div class="galleryContaineer" style="height: 100%; white-space: nowrap;">
            <img width="1000" height="2000" style="max-height: 90%; width: auto; height: auto" />
            ...
         </div>
      </div>
   </body>
</html>

这似乎得到了很好的支持......好吧，直到我在 Firefox for Android（4.4.4 上的 31.0）上尝试过它。可能没人用。

显然，nowrap 导致 Firefox 将身体的高度计算得很大，这会破坏垂直拟合。考虑一下这个小提琴：http://jsfiddle.net/W5a6V/7/，您可能必须打开未包装的http://fiddle.jshell.net/W5a6V/7/show/（如果此链接最终失效，只需检查正确的小提琴并在新选项卡中打开结果 iframe 的src），因为 iframe 以某种方式修复了这个混乱.

对于一大堆二进制文件，抱歉 @jsfiddle :) — 欢迎替代品。

Answer 1

几个小时后，我采用了一种我放弃了上面显示的较少 CSS-heave 方法的技术。 您必须强制 Firefox 将主体的高度限制为实际视口的高度，这可以通过媒体查询来完成，如下所示：

@media screen and (min-device-height:   0px) { body { max-height:   0px; } }
@media screen and (min-device-height: 100px) { body { max-height: 100px; } }
@media screen and (min-device-height: 200px) { body { max-height: 200px; } }

等等。我想这有一个很酷的名字。它非常强大，在 imgs 也必须单独包装在某种容器中的情况下帮助我，想想字幕。

如果您的容器之一是绝对定位的，您可能需要对其应用最大高度，而不是主体。

虽然我解决了这个问题 - 请参阅下面的答案 - 其他想法非常感谢。

这是小提琴：分别是http://jsfiddle.net/W5a6V/9/ 和http://fiddle.jshell.net/W5a6V/9/show/。

---

更新：忘记在 Webkitland 中查看...它确实破坏了原始布局。必须通过在媒体查询中添加 and (-moz-touch-enabled: 1) 来定位 Firefox。呸！