鏈接在移動設備上不起作用（Wordpress）

Question

堆棧社區，

我尚未找到解決此問題的方法，希望有人能幫助我。

我有一個使用主題的WordPress網站，到目前為止，所有工作均無縫進行。 但是，該網站的“頁腳”不是Widget，我手動在每個頁面上添加了內容。 我知道調整工作很痛苦，但是對於這個項目，這是一個快速的解決方案。

我的問題如下：

我將社交媒體圖標用作按鈕，它們已鏈接在一起。 這些鏈接可以在台式機（使用Chrome和Safari）上以及在具有不同屏幕尺寸選擇的Google的“開發人員工具”窗口中正常運行。 例如，如果我選擇“ 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>

Codepen HTML for Facebook圖標

事實是，除了這些圖標之外，我還可以單擊網站上的所有其他鏈接。 我以前從未遇到過這個問題。

謝謝您的幫助！

Answer 1

我首先要在移動設備上檢查的是圖標鏈接的目標區域，以及這些鏈接之上是否還有其他（不可見的）元素。

對於第一個問題，請臨時編輯css並在社交媒體鏈接的定位標記中添加背景色，然后檢查這些目標區域是否在您期望的位置。

對於第二個問題，使用檢查器檢查靠近社交媒體鏈接的元素，尋找鏈接頂部的內容。

如果您不滿意，可以共享指向您網站的鏈接，以便其他人可以提供幫助。

祝好運！