链接无法在移动设备上运行（Wordpress）

Question

堆栈社区，

我无法找到解决此问题的方法，我希望有人可以帮助我。

我有一个使用主题的WordPress网站，到目前为止一切都无缝地工作。然而，＆＃34;页脚＆＃34;这个网站不是一个Widget，我手动在每个页面上添加了内容。我知道调整内容很痛苦，但对于这个项目来说，这是一个快速的解决方案。

我的问题如下：

我使用社交媒体图标作为按钮，它们是相互关联的。这些链接在桌面（使用Chrome和Safari）以及Google的“开发者工具”和＃34;具有不同屏幕尺寸选择的窗口。例如，如果我选择＆＃34; iPhone＆＃34;链接工作。但是当我在实际手机上打开网站时，我无法点击它们，它们无法正常工作。

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

以下是一些截图：

以下是使用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>

Codepen HTML for facebook icon

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

感谢您的帮助！

Answer 1

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

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

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

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

祝你好运！