html - 链接在移动设备上不起作用（Wordpress）

问题描述

堆栈社区，

我还没有找到解决这个问题的方法，希望有人能帮助我。

我有一个使用主题的 WordPress 网站，到目前为止一切都可以无缝运行。但是，这个网站的“页脚”不是一个小部件，我在每个页面上手动添加了内容。我知道调整东西很痛苦，但对于这个项目来说，这是一个快速的解决方案。

我的问题如下：

我使用社交媒体图标作为按钮，它们是链接的。这些链接在桌面（使用 Chrome 和 Safari）和谷歌的“开发者工具”窗口上可以正常工作，并选择不同的屏幕尺寸。例如，如果我选择“iPhone”，则链接有效。但是，一旦我在我的实际手机上打开该网站，我就无法点击它们，它们无法正常工作。

为什么会这样，我该如何解决？

以下是一些截图：

以下是使用 CodePen 在 Google Dev Tools 中显示的 facebook 图标的 html 代码：

<div class="wpb_wrapper"><div class="btn-align-center">
<a href="https://www.facebook.com/iamviola.de/" class="default-btn-shortcode dt-btn dt-btn-l fadeIn animate-element animation-builder full-width-btn  vc_custom_1523221889433 animation-triggered start-animation" target="_blank" id="default-btn-7"><span>
<svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-2x" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
<!-- <i class="fab fa-facebook-f fa-2x"></i> -->
</span></a>
</div></div>

用于 Facebook 图标的 Codepen HTML

问题是，除了这些图标，我可以点击我网站上的所有其他链接。我以前从来没有遇到过这个问题。

谢谢您的帮助！

标签： htmlwordpresshyperlinkresponsive-designsmartphone

我会在移动设备上检查的第一件事是您的图标链接的目标区域，以及这些链接顶部是否可能存在另一个（不可见）元素。

对于第一个问题，暂时编辑您的 CSS 并为您的社交媒体链接的锚标签添加背景颜色，并检查这些目标区域是否是您期望的位置。

对于第二个问题，使用检查器检查靠近社交媒体链接的元素，寻找可能位于链接顶部的内容。

如果您没有任何快乐，您可以分享指向您网站的链接，以便其他人可以提供帮助。

祝你好运！

html - 链接在移动设备上不起作用（Wordpress）

问题描述

解决方案

推荐阅读