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

Question

堆栈社区，

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

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

我的问题如下：

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

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

以下是一些截图：

这是使用 CodePen 在 Google 开发工具中显示的 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>

Codepen HTML for facebook icon

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

感谢您的帮助！

Answer 1

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

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

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

如果您不满意，可以分享指向您网站的链接，以便其他人提供帮助。

祝你好运！