具有低高度横向方向的移动设备中的 Fancybox 缩放问题答案

【问题标题】：Fancybox Scaling Issues in Mobile Devices With Low Height Landscape Orientations具有低高度横向方向的移动设备中的 Fancybox 缩放问题
【发布时间】：2014-12-29 18:00:44
【问题描述】：

问题描述：

我在响应式页面设计中使用 Fancybox v2.1.5。我遇到的问题是小型移动设备的矩形比正方形多。

当设备处于纵向并且我调用 Fancybox 时，它会显示为屏幕宽度，并且标题文本会在图像下方换行。这不是问题，因为纵向模式下通常会有很多额外的屏幕空间。

但是，当我将设备更改为横向时，Fancybox 会缩小其高度以响应较短的屏幕高度。

宽度也明显按比例缩小。由于标题框的宽度也由 Fancybox 容器的宽度控制，该容器会根据图像宽度进行调整，这意味着文本会更多地换行，并且通常会导致图像缩小更多，因为它被调整为更小的尺寸以适应所需的空间标题文字换行。

我没有成功地尝试过使用 Fancybox CSS 和媒体查询，但是阅读这里的其他帖子表明你需要 javascript 功能才能有效地做到这一点，虽然我对 html 和 CSS 非常熟悉，但我对 javascript 仍然相当不稳定。

所需功能：

我希望能够测试“短”屏幕高度并格式化 Fancybox 标题以尽可能多地为图像提供空间。

理想情况下，这将通过在上面来控制 Fancybox Title 字体大小并允许标题框延伸到容器边界之外。

任何以编码建议的形式提供的帮助或将我指向我错过的其他帖子将不胜感激。

【问题讨论】：

是的，这就是标题的问题。这就是为什么您可以使用按钮助手，然后用户可以将该图像切换得更大。您还可以使用媒体查询将标题隐藏在最小高度。在使用 Fancybox 多年后，我切换到 Magnific Popup。 brutaldesign.github.io/swipebox 也很棒。

标签： javascript jquery css fancybox fancybox-2

【解决方案1】：

您可以让 fancybox 水平仅响应，这样无论屏幕大小如何，它都会根据需要扩展其height。这样图像就不会缩小（包括它们的title）以适应视口的height（尽管您可能需要向下滚动才能看到更大图像的其余部分及其title）

如果此替代方案适合您的需求，您需要在自定义初始化脚本中组合一组 fancybox 的 API 选项，例如：

jQuery(document).ready(function ($) {
    $('.fancybox').fancybox({
        fitToView: false, // won't shrink to fit in the viewport
        maxWidth: "90%", // need to explain?
        helpers: {
            title: {
                type: "inside" // can fit larger title/captions
            }
        },
        beforeLoad: function () {
            // optional:
            // get a large title from a data attribute
            this.title = $(this.element).data("caption");
        }
    });
}); // ready

关于title 的样式，您始终可以添加额外的CSS 规则（在加载fancybox CSS 文件之后）来设置您喜欢的样式，例如：

.fancybox-title {
    font-family: verdana, sans-serif;
    font-size: 11px;
    font-style: italic;
    color: #008000;
}

见JSFIDDLE

【讨论】：