首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >点击手机上的链接会在页面底部打开图像,而不是在链接位置。

点击手机上的链接会在页面底部打开图像,而不是在链接位置。
EN

Stack Overflow用户
提问于 2021-04-12 19:23:08
回答 1查看 40关注 0票数 0

我的网站上的链接非常棒,就像鼠标通过鼠标一样,几乎就像点击手机上的链接一样好--除了在手机上,图片不会在链接旁边打开--它们是在页面的最下面,在页脚下面打开的。如果我尝试使用以CSS为中心的代码(我已经尝试过几次),它会破坏桌面上图像的位置。我非常希望有一个解决办法。网站:https://coachcaudlecares.org/llltest.html

相关CSS:

代码语言:javascript
复制
#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;
}

我很抱歉,但我不知道如何输入正确的编码来显示段落中弹出的示例,但是您可以很容易地在页面上找到它。谢谢任何能帮忙的人。

EN

回答 1

Stack Overflow用户

发布于 2021-04-13 07:32:31

查看导入的JS文件中的代码(该文件用于创建和定位弹出窗口),我可以看到它正在测试这样的触摸设备:

代码语言:javascript
复制
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;intel mac x 10_15_6) applewebkit/605.1.15 (khtml,类似壁虎)版本/14.0.3 safari/605.1.15

没有提到“ipad”,所以代码认为它有一个非接触式设备,并为桌面进行正常的定位。实际上,在一个真正的iPad上,我看到弹出的位置是对的。

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

现在,我不知道移动版本的缺失是否真的有任何影响,但我可以从弹出式的JS中看到,如果系统认为该设备实际上是触摸式的,那么“鼠标”的X和Y位置似乎就不会被读取。因此,绝对定位的弹出窗口放在页面必须的位置,也就是页面的末尾。

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

(显然,如果弹出的js文件被另一个真实的站点使用,那么就拿一个副本并使用它吧!)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67064480

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档