Проверяем 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 нужен, чтобы не было перехода по ссылке.

Возможно, дело действительно в размере ссылки, или её внешнем виде? Не знаю, но после развешивания дополнительного события всё заработало. А вот, например, на 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.
То есть, виноваты мета-теги в заголовке моих страниц, которые говорят, что сайт готов работать с мобильными устройствами. Я их добавлял для нормального отображения на телефонах, и не думал, что аукнется на планшетах.

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

Следующая заметка
С наступающим, 2014 годом


Комментарии ()

  1. Денис Богдановский 24 декабря 2013, 14:02 # 0
    Понимаю что не очень актуально… но на Nokia N8 (Symbian Belle) не при нажатии на кнопку «Оставить новый комментарий» выкидывает на главную.
    1. Alex Vakhitov 24 декабря 2013, 15:08 # 0
      Круто, теперь все работает (: а поведение в сафари и хроме одинаковое изза того что на ios нельзя ставить сторонние бракзеры, все браузеры отличаются тока обвесом, а движок один и тото же
      1. Alex Vakhitov 24 декабря 2013, 15:11 # 0
        Нашел глюк. При редактировании комментария область с текстом не подхватывается и нельзя ничего написать и выделить текст
        1. Alex Vakhitov 24 декабря 2013, 15:44 # 0
          Даже больше, если переключить фокус с текстового поля, потом нельзя вернуться и продолжить писать
          1. Василий Наумкин 24 декабря 2013, 15:52 # 0
            А у меня более-менее. Не с первого раза, но фокус работает.

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

            Вот, коммент только что смог отредактировать :-)
            1. Чикин Артур 24 декабря 2013, 16:17 # 0
              Я так думаю это проблема не в тикетах а в верстке сайта:)
              1. Alex Vakhitov 24 декабря 2013, 16:31 # 0
                Видимо у меня пальцы большие и не попадаю в нужное место (:
        2. Evgeny Epifanov 30 декабря 2013, 00:53 # 0
          С ontouchstart заметил такой косячек: если при прокрутке странице палец попадает на такую ссылку, происходит сработывание ссылки. Замечено на андройде.
          Т.е. если я тыкаю в «ответить» и кручу страницу вниз, то открывается окно редактирования ответа.
          1. Василий Наумкин 30 декабря 2013, 09:37 # 0
            Поменял на ontouchend — должно быть получше.
            1. Evgeny Epifanov 01 января 2014, 15:57 # 0
              Да, так однозначно лучше.
              1. Воеводский Михаил 12 января 2014, 01:30 # 0
                На iOS 6 проблема осталась. Прилистании часто попадаю в форму комментария.
            2. Сергей Шлоков 11 января 2014, 19:14 # 0
              Не люблю с телефона читать, но разок решил попробовать. У меня на андроид 4.1.2. пагинация работает только на главной. А в разделах «Вопросы», «Трюки» и других где есть пагинация, не работает. Пробовал в FF и Chrome. Какая-то странность.
              1. Сергей Шлоков 13 января 2014, 14:50 # 0
                Василий, может для удобства навигации на мобильнике в меню сделать ссылку на прямой эфир? Было бы удобно. Ведь на мобильном человек больше следит за комментариями, чем доки читает. Приходится постоянно прокручивать.
                1. Василий Наумкин 13 января 2014, 14:51 # 0
                  А у меня он нигде не выводится, только в сайдбаре. Это нужно еще дополнительную страницу делать — пока некогда.
                  1. Сергей Шлоков 13 января 2014, 16:11 # 0
                    Выводятся сначала посты, потом поиск, потом прямой эфир, потом твитер. И до прямого эфира каждый раз надо мотать. Было бы удобно сделать якорь, чтоб до комментов проматывало, как ссылка «вверх». Когда руки дойдут.
                2. Александр Котлов 17 января 2014, 19:05 # 0
                  Василий, с андройд лопаты не работают кпопки пагинации в разделе с первым курсом обучения, сама пагинация через get работает, в других разделах кномки норм работают.
                  1. alex cernobai 17 января 2014, 19:12 # 0
                    twitter plugin отвалился
                    1. Чикин Артур 17 января 2014, 21:18 # 0
                      У меня вроде работает.
                    2. alex cernobai 17 января 2014, 21:22 # 0
                      сейчас уже да! а так 2 дня видел только спиннер
                      Добавление новых комментариев отключено.