移动设备上的 Fancybox 无法缩放外部页面？答案

【问题标题】：Fancybox on mobile device failed to scale the external page?移动设备上的 Fancybox 无法缩放外部页面？
【发布时间】：2017-03-19 16:39:43
【问题描述】：

移动设备上的 Fancybox 无法缩放外部页面？

我在一个网站上使用 fancybox。当用户在页面上时，fancybox 会弹出并显示一个外部 url。这个外部 url 是一个响应式页面，它本身在普通 PC 和移动设备上都可以正常工作。它显示了一个 youtube 视频和一个表格。

但是，当使用 fancybox 显示此页面时，它在普通 PC 上运行良好（如果浏览器窗口不太小）。但在移动设备上，youtube 视频和表单大小不会自动缩放，因此只有部分页面显示在移动设备上。

fancybox 中是否有需要更改的设置？或者，这是fancybox的限制？任何其他类似的插件/javascript 库都可以在移动和普通电脑上做类似的事情吗？

代码如下：

$('#IntroVideo').fancybox({     
    'autoDimensions': false,
    'padding': 0,
    'width': '100%',
    'height': '100%',
    'autoScale': true,
    'autoSize': true,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'iframe'
});

...

<div class="searchtag-wrap ">
    <a href="https://www.example.net/" class="frontpage-button" id="IntroVideo">What is MySite?</a>
</div>

或者，是否可以在移动设备上禁用 fancybox？怎么样？

谢谢

【问题讨论】：

标签： javascript android jquery mobile fancybox

【解决方案1】：

Fancy 3 似乎运行良好，您使用的是哪个版本的 fancybox？

这是一个工作示例，在运行 android 6 的 android 手机上对其进行了测试。

.fancybox-slide--iframe .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 95%;
	max-height : 90%;
	margin: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fancybox</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />	
</head>
<body>
<a data-fancybox data-src="https://www.awwwards.com/" href="javascript:;">
	Webpage
</a>	
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

</body>
</html>

以上代码https://jsbin.com/noxoke/edit?output的JSbin@

【讨论】：

不，还是同样的问题。外部页面是www。我的邮局。 net /mzm ，也许页面有问题？或者，是否可以在移动设备上禁用 fancybox？
无法打开您提供的网站，是的，您可以在移动设备上禁用fancybox，请在此处查看javascript代码以禁用jsbin.com/noxoke/edit?html,js,output