Проверяем bezumkin.ru на мобильных устройствах

Вчера с удивлением обнаружил, что скрипты Tickets не работают на мобильных устройствах Apple. Проблема обнаружилась на iPad, а потом подтвердилась и на iPhone.

Не работают независимо от браузера, что в Chrome, что в Safari нажатия на ссылки "ответить" и "изменить" просто игнорируются. А вот на Android проблем нет, всё работает как положено. Стало быть, дело в iOS.

Еще интересный момент - кнопки нажимаются нормально, проблема только у ссылок.

В итоге разгадка оказалось простой - think different. На устройствах Apple нажатия на ссылочки для javascript рассматриваются не как click, а как touch. И если задержать палец в Safari на такой ссылке, и нажать "открыть" - то она срабатывает.

Стало быть, нужно пройти по всем формам, и везде, где у ссылки есть onclick="" и добавить еще ontouchstart="":


<a href="#reply" ontouchstart="return Tickets.forms.reply([[+id]]);" onclick="return Tickets.forms.reply([[+id]]);">
    <i class="icon-pencil"></i>ответить
</a>

return нужен, чтобы не было перехода по ссылке.

Возможно, дело действительно в размере ссылки, или её внешнем виде? Не знаю, но после развешивания дополнительного события всё заработало. А вот, например, на http://habrahabr.ru точно так же нельзя ответить на комментарий с iPad.

Вот и всё, теперь комментарии у меня на сайте работают в iOS - прошу побродить по сайту и проверить. Может еще что найдём?

P.S. Еще погуглил, и нашел такое объяснение:

Do you have mobile specific meta tags at the top?(viewport/content width) I believe as of a recent iOS update (iOS 6.something), if the page has mobile meta tags, it will not recognise click events. You may want to do as TheDoc recommended and look in to touch events.

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

В любом случае, сейчас работает везде.

19 комментариев

Денис Богдановский

Понимаю что не очень актуально.. но на Nokia N8 (Symbian Belle) не при нажатии на кнопку "Оставить новый комментарий" выкидывает на главную.

Alex Vakhitov

Круто, теперь все работает (: а поведение в сафари и хроме одинаковое изза того что на ios нельзя ставить сторонние бракзеры, все браузеры отличаются тока обвесом, а движок один и тото же

Alex Vakhitov

Нашел глюк. При редактировании комментария область с текстом не подхватывается и нельзя ничего написать и выделить текст

Alex Vakhitov

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

Василий Наумкин

А у меня более-менее. Не с первого раза, но фокус работает.

Еще поразбираюсь.

Вот, коммент только что смог отредактировать :-)

Чикин Артур

Я так думаю это проблема не в тикетах а в верстке сайта:)

Alex Vakhitov

Видимо у меня пальцы большие и не попадаю в нужное место (:

Evgeny Epifanov

С ontouchstart заметил такой косячек: если при прокрутке странице палец попадает на такую ссылку, происходит сработывание ссылки. Замечено на андройде. Т.е. если я тыкаю в "ответить" и кручу страницу вниз, то открывается окно редактирования ответа.

Василий Наумкин

Поменял на ontouchend - должно быть получше.

Evgeny Epifanov

Да, так однозначно лучше.

Воеводский Михаил

На iOS 6 проблема осталась. Прилистании часто попадаю в форму комментария.

Сергей Шлоков

Не люблю с телефона читать, но разок решил попробовать. У меня на андроид 4.1.2. пагинация работает только на главной. А в разделах "Вопросы", "Трюки" и других где есть пагинация, не работает. Пробовал в FF и Chrome. Какая-то странность.

Сергей Шлоков

Василий, может для удобства навигации на мобильнике в меню сделать ссылку на прямой эфир? Было бы удобно. Ведь на мобильном человек больше следит за комментариями, чем доки читает. Приходится постоянно прокручивать.

Василий Наумкин

А у меня он нигде не выводится, только в сайдбаре. Это нужно еще дополнительную страницу делать - пока некогда.

Сергей Шлоков

Выводятся сначала посты, потом поиск, потом прямой эфир, потом твитер. И до прямого эфира каждый раз надо мотать. Было бы удобно сделать якорь, чтоб до комментов проматывало, как ссылка "вверх". Когда руки дойдут.

Александр Котлов

Василий, с андройд лопаты не работают кпопки пагинации в разделе с первым курсом обучения, сама пагинация через get работает, в других разделах кномки норм работают.