打开fancybox的链接在ios中不起作用答案

【问题标题】：Link to open fancybox not working in ios打开fancybox的链接在ios中不起作用
【发布时间】：2013-01-09 10:21:59
【问题描述】：

我在使用 ipad 和 iphone 上的 fancybox 时遇到了问题。应该打开灯箱的链接有时没有响应。链接 css 已重置，灯箱未显示。在桌面浏览器上运行良好。

我认为这与屏幕大小、ios 设备上的缩放级别以及fancybox 如何确定框的大小和位置有关。我注意到，如果我重新加载页面，链接有时会起作用。放大后链接失效了。

我没有选择，任何帮助将不胜感激。

【问题讨论】：

该死的我和我的阅读障碍.. 我检查了桌面 chrome 和 firefox 多次没有任何问题，然后回到这个问题并意识到你清楚地说明了问题出现在 ios 而不是在桌面浏览器中.. || 无论如何，在我的 ipod touch 上检查了一下，果然什么也没发生。初步想法：使用 safari web 检查器检查控制台必须说的内容。为fancybox插件设置一个回调并将console.log('test')放入回调中以查看它是否在ios中触发。 moduscreate.com/enable-remote-web-inspector-in-ios-6
想到的另一个想法是：尝试隔离链接和相关代码。分阶段删除代码，直到问题消失。或者直接用干净的文档测试它，看看它是否首先在 ios 中工作（通过干净的文档，我的意思是链接和花式框的基本部分)。

标签： jquery ios fancybox fancybox-2

【解决方案1】：

这既不是 iOS 问题，也不是花哨的问题。

除了你的验证问题，比如

Mismatch between Public and System identifiers in the DOCTYPE declaration

...因为你有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

...什么时候应该有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

...（如果您能看到区别）您的http://creactor.nl/script/javascript.js 文件中还有一些行会使fancybox 与iOS 发生冲突：

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

我不是 iOS 方面的专家，所以我无法告诉你如何重写这些行，但如果你将它们隔离开来，fancybox 就可以正常工作。

我对您的网站进行了小幅清理，包括设置正确的 DOCTYPE 和重新组织脚本顺序，并注释掉上面的那些行，fancybox 工作正常（在我的 iPad 中）。

检查JSFIDDLE

【讨论】：

嗨，肯尼迪，感谢您的努力！我会应用你的更改，如果它解决了问题，我会通知你。
好的，我已经更改了我网站的代码，到目前为止，问题似乎已经解决。看来罪魁祸首是您提到的javascript条目。再次感谢！