我的网站上的链接非常棒,就像鼠标通过鼠标一样,几乎就像点击手机上的链接一样好--除了在手机上,图片不会在链接旁边打开--它们是在页面的最下面,在页脚下面打开的。如果我尝试使用以CSS为中心的代码(我已经尝试过几次),它会破坏桌面上图像的位置。我非常希望有一个解决办法。网站:https://coachcaudlecares.org/llltest.html
相关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;
}我很抱歉,但我不知道如何输入正确的编码来显示段落中弹出的示例,但是您可以很容易地在页面上找到它。谢谢任何能帮忙的人。
发布于 2021-04-13 07:32:31
查看导入的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;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文件被另一个真实的站点使用,那么就拿一个副本并使用它吧!)
https://stackoverflow.com/questions/67064480
复制相似问题