具有低高景观方向的移动设备中的Fancybox缩放问题 [英] Fancybox Scaling Issues in Mobile Devices With Low Height Landscape Orientations

问题描述

问题描述：

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

I am using Fancybox v2.1.5 in a responsive page design. The problem I have is with smaller mobile devices that are more rectangular than square.

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

When the device is in portrait orientation and I call Fancybox, it displays to the width of the screen and the title text wraps below the image. This is not an issue as there is usually a lot of extra screen real estate in portrait mode.

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

When I change the device to landscape orientation however, Fancybox shrinks its height in response to the shorter screen height.

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

The width obviously shrinks proportionally as well. As the title box width is also controlled by the width of the Fancybox container, which adjusts to the image width, it means that the text wraps even more and usually causes the image to shrink more as it gets resized smaller to accommodate the space needed for the title text wrapping.

我没有尝试过使用Fancybox CSS和媒体查询，但是在这里阅读其他帖子表明你需要javascript功能来有效地做到这一点而我使用HTML和CSS非常可靠，我仍然对javascript感到不稳定。

I have unsuccessfully tried playing around with the Fancybox CSS and media queries but reading other posts here suggests you need javascript functionality to effectively do this and while I am pretty solid with html and CSS, I am still fairly shaky with javascript.

所需功能：

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

I'd like to be able to be able to test for "short" screen heights and format the Fancybox title to give as much real estate to the image, as possible.

理想情况下，这可以通过高于控制Fancybox Title字体大小并允许标题框延伸出容器边界。

Ideally this would be by being above to control Fancybox Title font size and allow the titlebox to extend out past the container boundaries.

任何有关编码建议形式的帮助或指向我错过的其他帖子都会非常感激。

Any help in the form of coding suggestions or pointing me to other posts that I amy have missed would be greatly appreciated.

推荐答案

您可以只设置fancybox 水平，以便根据需要扩展其 height ，无论屏幕尺寸如何。这样图像不会缩小（包括标题）以适应视口的高度（尽管您可能需要向下滚动以查看更大图像的其余部分及其标题）

You could make fancybox horizontally responsive only so it will extend its height as needed regardless the screen size. This way images won't shrink (including their title) to fit in the viewport's height (although you may need to scroll down to see the rest of a larger image and its title)

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

If this alternative suits your needs, you need to combine a set of fancybox's API options in your custom initialization script like :

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

关于标题的样式，您可以随时添加额外的CSS规则（在加载fancybox CSS文件后）以设置您喜欢的样式，如：

Regarding styling the title, you can always add an extra CSS rule (after loading the fancybox CSS file) to set your preferred styles like :

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

参见 JSFIDDLE

See JSFIDDLE

这篇关于具有低高景观方向的移动设备中的Fancybox缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！