Кнопка html не работает на мобильном устройстве

Тег определяет кнопку, на которую можно нажать.

Внутри элемента вы можете поместить контент, например текст или изображения. В этом разница между этим элементом и кнопками, созданными с его помощью.

Совет: всегда указывайте атрибут типа для элемента. В разных браузерах для элемента используются разные типы по умолчанию.

Кнопка, на которую можно нажать, помечена следующим образом:

<button type = "button">Click Me!</button>

ЕЩЕ

<button name = "favorite" type = "button">
  <svg aria-hidden = "true" viewBox = "0 0 10 10"><path d = "m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
  Add to favorites
</button>

Проблема может заключаться в том, что вы используете событие onClick, которое не регистрируется на мобильном устройстве (поскольку вы не нажимаете - вы нажимаете).

В этом ответе объясняется, как использовать событие «touchstart», которое будет работать на мобильном телефоне.

https://stackoverflow.com/a/22015946/2619909

Глянь сюда :) Кнопка не работает на мобильных устройствах, но работает при загрузке ПК

Несколько наблюдений: - Не уверен, почему вы добавили обертку div вокруг кнопки. Попробуйте удалить оболочку div - Необходимо проверить вашу html-разметку, поскольку вы пытаетесь просмотреть html-страницу на мобильном телефоне, и если элементы не структурированы должным образом, то высока вероятность того, что один из элементов перекрывает кнопку. Следовательно, событие щелчка не запускается для кнопки, а не может пытаться вызвать событие щелчка перекрывающегося элемента.