Html 点击手机上的链接会打开页面底部的图像，而不是链接位置

我网站上的链接就像鼠标滑过一样好，就像手机上点击过的链接一样好，除了在手机上，图片不会在链接旁边打开——它们会在长页面的底部，页脚下面打开。如果我尝试使用CSS居中代码（我已经尝试了几个），它会破坏图像在桌面上的位置。如果能找到解决办法，我将不胜感激。网站：

相关CSS：

#pup {
  position:absolute;
  z-index:999; /* aaaalways on top*/
  padding: 3px;
  border: 1px dashed grey;
  background-color: #777;
  color: white;
  font-size: 0.95em;
  cursor: pointer;
}

---

我很抱歉，但是我不知道如何输入正确的代码来在段落中显示弹出窗口的示例，但是您可以很容易地在页面上找到它。感谢所有能够提供帮助的人。

查看导入的JS文件中的代码，该文件创建并定位弹出窗口，我可以看到它正在测试以下触摸设备：

var deviceAgent = navigator.userAgent.toLowerCase();
        return deviceAgent.match(/(iphone|ipod|ipad|android|blackberry|iemobile|opera m(ob|in)i|vodafone)/) !== null);

这不是一种安全的测试方法，因为浏览器可以编写自己喜欢的设备代理

例如，在一台真正的iPad（IOS 14）上，我看到这样的结果：

mozilla/5.0（macintosh；英特尔mac os x 10_15_6）applewebkit/605.1.15（khtml，类似gecko）版本/14.0.3 safari/605.1.15

没有提到“ipad”，所以代码认为它有一个非触摸式设备，并对桌面进行正常定位。事实上，在一台真正的iPad上，我看到了正确位置的弹出窗口

再深入一点，我可以看到在你网站的首页有一些对jquery和jquerymobile的“历史性”调用。但是它们是通过http调用的，而站点是通过https调用的，因此它们不会被加载。您应该在浏览器的开发控制台中看到错误。jquery的最新版本是通过https加载的

现在，我无法判断手机版本的缺失是否真的有任何影响，但我可以在弹出窗口的JS中看到，如果系统认为该设备实际上是触摸式设备，“鼠标”的X和Y位置似乎没有被读取。因此，绝对定位的弹出窗口被放置在页面当时到达的位置，即最末端

首先，您可以注释掉上面给出的deviceAgent代码并返回false。然后尝试真正的触摸设备，特别是三星和iPhone，看看会发生什么

---

（显然，如果弹出的js文件被另一个真实站点使用，请复制并使用！）

点击的照片在我的真实IOS/iPad（纵向和横向）上的相关红色字附近显示OK，但它们出现在Chrome iPad emulator的页面底部。你在真实的iphone和模拟器上看到问题了吗？对不起，我现在没有手机可以试穿。是的，我在iPhone和三星手机上看到了问题。有人告诉我，它们在iPad上的显示是正确的。我看到了问题的起因，并将迄今为止的发现纳入了答案中。这可能不会导致一个完整的解决方案，我们需要先尝试我建议的实验。谢谢，这听起来是一个很好的尝试，但我找不到您所指的js文件：（我的代码太多了，我搜索了所有这些代码，但都没有找到代码。你能告诉我它的名称吗？顺便说一下，我确实将所有http站点更新为https以获得最新版本。不知道这是否重要，因为我可能没有使用它们；它们是早期尝试。你的测试站点现在有更多问题-你正在加载jquery twi。）ce和jquery mobile。你能拿出前面提到的两个参考（1…）版本。值得使用浏览器开发工具查看站点的标题部分，以查看正在加载的内容。您加载的弹出窗口的版本将显示在那里，它名为/nhpup_1.1.jsOk，谢谢。我将进行一些调查。注释该代码确实会导致链接显示不同，但现在它们是一个不要将页面的顶部放在固定的位置而不是底部。有没有办法解决这个问题？你真的很有帮助，我正在进一步研究其他问题。经过测试，结果表明早期的jquery-1.11.1.min.js对于使nhpup_1.1.js工作是必要的。不过，开发工具不喜欢nhpup脚本，尽管它可以工作，尤其是在这个问题上s:“nhpup.onTouchDevice不是一个函数。”