具有低高景观方向的移动设备中的Fancybox缩放问题
问题描述：
我在响应式页面设计中使用Fancybox v2.1.5。 我遇到的问题是移动设备较小，矩形比方形。
当设备处于纵向方向并且我调用Fancybox时，它将显示为屏幕宽度，标题文本将包含在图像下方。 这不是问题，因为在纵向模式下通常有很多额外的屏幕空间。
但是，当我将设备更改为横向时，Fancybox会根据较短的屏幕高度缩小其高度。
宽度也明显缩小。 由于标题框宽度也由Fancybox容器的宽度控制，该宽度调整为图像宽度，这意味着文本包装更多，并且通常会导致图像缩小，因为它调整得更小以适应所需的空间标题文字包装。
我没有成功尝试使用Fancybox CSS和媒体查询但是在这里阅读其他post表明你需要javascriptfunction才能有效地做到这一点，虽然我对html和CSS非常稳定，但我仍然对javascript相当不稳定。
期望的function：
我希望能够测试“短”屏幕高度并格式化Fancybox标题，以尽可能多地为图像提供空间。
理想情况下，这可以通过高于控制Fancybox Title字体大小并允许标题框扩展到容器边界之外。
任何编码建议forms的帮助或指向我错过的其他post将不胜感激。
您可以使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