Question

移动设备上的Fancybox无法扩展外部页面？

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

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

我应该在fancybox中更改设置吗？或者，这是fancybox的限制？任何其他类似的插件/ javascript库可以在移动和普通PC上做类似的事情吗？

以下是代码：

$('#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？如何吗

由于

Answer 1

Fancy 3似乎工作得很好，你正在使用哪个版本的fancybox？

这是一个工作示例，在运行android 6的Android手机上测试过。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

的JSbin

移动设备上的Fancybox无法扩展外部页面？

1 个答案: