Ссылки не работают на мобильных устройствах (Wordpress) - PullRequest
0 голосов
/ 03 июня 2018

стек сообщества,

Я пока не смог найти решение этой проблемы, и я надеюсь, что кто-то может мне помочь.

У меня есть WordPress-сайт, который использует тему, поэтомудалеко все работает без проблем.Тем не менее, «нижний колонтитул» этого сайта не является виджетом, я добавил контент на каждую страницу вручную.Я знаю, что регулировать вещи - это больно, но для этого проекта это было быстрое решение.

Моя проблема заключается в следующем:

Я использую значки социальных сетей в качестве кнопок, и онисвязаны между собой.Ссылки отлично работают на рабочем столе (с использованием Chrome и Safari) и в окне Google «Инструменты разработчика» с различным выбором размеров экрана.Например, если я выберу «iPhone», ссылки будут работать.Но как только я открываю сайт на своем телефоне, я не могу нажать на них, они не работают.

Почему это и как я могу это исправить?

Вот несколько скриншотов:

Icons shown on desktop in Google Chrome Icons shown on

Вот код HTML, показанный для facebookicon в Google Dev Tools с CodePen:

<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 для Facebook icon

Дело в том, что я могу нажать на любую другую ссылку на моем сайте, кромеэти значки.У меня никогда не было этой проблемы раньше.

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 03 июня 2018

Первое, что я хотел бы проверить на мобильных устройствах, - это целевые области для ваших значков ссылок, и, возможно, есть еще один (невидимый) элемент, который находится над этими ссылками.

Для первого вопроса временноотредактируйте свой CSS и добавьте цвет фона к тегам привязки ваших ссылок в социальных сетях и проверьте, находятся ли эти целевые области там, где вы ожидаете их видеть.

По второму вопросу, используя инспектор, изучите элементы, близкие к ссылкам в социальных сетях, в поисках чего-то, что могло бы быть поверх ваших ссылок.

Если у вас нет радости, вы можете поделиться ссылкой на свой сайт, чтобы другие могли помочь.

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...