Gotchas/bugs в разработке для WebKit на iOS или Android

Ответ 1

Я нашел несколько вещей в моих недавних начинаниях с iPad.

1 Версия 4.2 iOS имеет ошибку, в которой выполняется слишком много document.getElementById('foo'); приведет к задержке браузера и, следовательно, не будет корректно выполнять команды. Чтобы исправить это, вам нужно создать переменные для хранения этой информации и только сделать команды выбора, когда это необходимо. Версия 4.3 iOS исправляет это, хотя, как я протестировал его на своем iPad.

2: При работе с позиционированием я обнаружил, что при создании собственного видеоконтроллера (для html5), если вы попытаетесь изменить размер видеоконтента с помощью позиции: relative или position: absolute, вы больше не увидите видео, а красивый черный экран (со звуком!). Чтобы исправить это, просто настройте родительский фрейм, и вам хорошо идти.

3: Если вы используете iScroll, обязательно установите тайм-аут при загрузке; особенно если у вас есть несколько других javascripts на странице, так как даже если документ загружается, когда "страница загружена" через:

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

У меня это не получилось, и я не мог понять, почему мой div не правильно оценивает, показывая мне все элементы, но последние два, а не прокрутку. Вместо этого я просто сделал

$(function(){
   //other page loaded items to do
   //the iScroller init
   setTimeout('iScrollerInit();',200);
});

и это очень быстро устранило проблему.

4: Если вы обнаружите, что ваши клики работают некорректно, я обнаружил, что многие из мобильных SDK там являются обязательными элементами во всем, что затрудняет достижение кликов к вещам как правило, вы хотите. Поэтому, чтобы исправить это, вы можете сделать что-то вроде:

$("#yourId").unbind("click").click(function(){ 
    //what to do when clicked
});

и я нашел, что это работает наиболее блестяще.

**UPDATE - Nov 2012 **: It been a few years, and there is so much more to add to this so wanted to update the list a bit.

5: Javascript стоит дорого на нескольких устройствах STILL (декабрь 2012). Выполнение вещей, которые манипулируют DOM, создает значительную задержку на устройствах, и вы должны быть очень осторожны при выполнении этих действий. Вы захотите проверить свои мобильные веб-страницы как на старых устройствах Android, так и на старых устройствах iPhone, поскольку из наших показателей это все еще хорошо используемые устройства.

6: Если вы передаете HTML для загрузки в веб-представлении на устройстве (приложение для iPhone или приложение для Android), есть моменты, когда вы увидите почти высоту 0. Что вам нужно сделайте, чтобы ваше приложение iPhone или Android сделало вызов Javascript на фактической странице, нацеленной на div, чтобы проверить страницу offsetHeight, которая затем позволит точно настроить высоту веб-просмотра.

**UPDATE - Dec 2012 **: Few more awesome findings

7: Я обнаружил, что, когда вы настраиваете таргетинг на свои divs для событий кликов, мобильные браузеры будут ждать 300 мс перед запуском события, эффективно создавая отставание. Они делают это, чтобы подтвердить, что щелчок не был двойным нажатием. чтобы избежать этого, вы можете связать события touchhend, которые будут срабатывать мгновенно!

Здесь немного кода

$(document).ready(function() {
    $('#element').bind('touchstart', function(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).toggleClass('hover_heading');
    });

    $('#element').bind('touchend', function(event) {
        event.preventDefault();
        $(this).toggleClass('hover_heading');
    });
});

Затем, когда вы видите, что мигание происходит над вашими объектами, используйте это, чтобы удалить это.

body * {
    -webkit-tap-highlight-color: rgba(0,0,0,0);  
}

Также, если вы хотите проверить выдающуюся статью, на которой написано google, вы можете просмотреть ее здесь:  - Создание быстрых кнопок для мобильных веб-приложений

**UPDATE - Feb 2013 **: Few more awesome findings

8: при версировании ваших файлов CSS и кешировании их с помощью URL-адресов, таких как: mydomain.com/css/styles.css?v=123 (или что-то еще), будьте осторожны с устройствами Android 2.2 и раньше, поскольку это заставляет чрезвычайно странное поведение.

Из моих выводов андроид сделает это совершенно неправильным и заставит html даже запутаться. Лучший способ работы с этими более старыми устройствами, к сожалению, изменить фактическое имя файла.

Надеюсь, эти результаты помогут другим, поскольку я изо всех сил пытаюсь преодолеть каждую из этих проблем в течение нескольких часов, царапая мою голову:)

Ответ 2

Я не знаю скомпилированного списка, но могу перечислить несколько:

• SVG не поддерживается (в настоящее время) на Android, так как он отключен. Поддержка поступает в Honeycomb. Напротив, iOS оставил поддержку SVG включенной и, похоже, работает хорошо.
• В то время как оба браузера поддерживают непрозрачность CSS3, убедитесь, что вы тщательно проверяете анимацию, поскольку они могут быть довольно изменчивыми для более сложной графики (особенно с несколькими уровнями непрозрачности).
• В моем javascript я обычно слушаю события "touchstart", "touchmove" или "touchhend" ради скорости (событие "click" обычно вызывает заметное отставание) и детализацию.
• Функции HTML5, такие как localStorage, и новые аудио и видео теги, похоже, работают хорошо. Тем не менее, на iphone вы не можете автовоспроизвести аудио или видео, поскольку пользовательское событие воспроизведения (и соответствующая загрузка) должно быть напрямую вызвано пользователем.
• Переходы, связанные с движением (изменение координат x и y), являются довольно плавными. Напротив, переходы, связанные с непрозрачностью, могут быть довольно изменчивыми в зависимости от задействованных ресурсов (иногда вам может потребоваться спрайт, чтобы получить более гладкое ощущение.)

Просто быстрые наблюдения.

Ответ 3

Недавно я написал сообщение в блоге о некоторых из cotchas с использованием рамки html5 - в моем случае Sencha Touch для создания собственного приложения, завернутого в PhoneGap.

http://www.moneytoolkit.com/2011/05/the-problem-with-sencha-touch-and-phonegap/

Ответ 4

3D-webkit в android не работает, особенно когда дело доходит до чего-либо, связанного с полями ввода.

http://code.google.com/p/android/issues/detail?id=13048

Было несколько случаев, когда я пытался отслеживать случайное поведение CSS, и в конечном итоге оно заканчивается на -webkit-transform:translate3d(0,0,0); в более высоком элементе (чтобы включить аппаратное ускорение на устройствах iOS), отбрасывая все.

Ответ 5

position: fixed не работает.

Мобильный раздел QuirksMode, вероятно, пригодится.

Ответ 6

Ну, в Android есть раздражающая ошибка, когда настройка каретки или выделения с помощью Javascript не влияет на то, где происходит вход.
Я задал вопрос об этом и пришел к выводу, что это ошибка браузера:(, это происходит в версиях 2.2 и 2.3.

Фокус textarea с кареткой после текста в браузере Android

Ответ 7

Две "функции", с которыми я столкнулся:

• Ящики ввода не реагируют на события касания (ontouchstart, ontouchmove, ontouchcancel), что также означает ontouchmove = "event.preventDefault()" не будет препятствовать прокрутке страницы, если вы создаете фиксированную страницу, -прокручиваемое приложение. (Возможно создание обходного пути klunky с использованием скрытых div.)

• Невозможно использовать функцию автофокуса или element.focus() в любом поле формы в WebKit, либо на Android, либо на iOS. Элемент получит курсор, но клавиатура не появится. Я все еще пытаюсь построить обходное решение для этого, но на данный момент это известное намеренное ограничение.: (

Ответ 8

Blockquote на событиях iOS click не распространяется вверх по элементу body над элементами, за исключением некоторых случаев (ссылки, входы, элементы с прикрепленными событиями и т.д.)

Это помогло мне обильно - спасибо.

Один элемент UX, который появился в пользовательском тестировании нашего веб-приложения, заключается в том, что взаимодействие iOS для избранных элементов является паршивым. Он требует 3 щелчка: 1) элемент выбора клика, 2) элемент клика, который вы хотите выбрать, 3) нажмите "Готово". И нет никакого события, которое я мог бы найти, если у вас выстрелил, когда вы нажмете "Готово". Таким образом, для коротких списков может быть лучше создать собственное всплывающее меню или другое взаимодействие.

Ответ 9

переполнение: прокрутка не поддерживается на Android 2.3

вам нужно вручную сделать прокрутку divs (touchmove + scrollTop change), если они находятся в контейнерах

есть неприятная ошибка, когда флажки на Android 2.3 не активируются, если они или их контейнер были спрятаны в любой момент

http://code.google.com/p/android/issues/detail?id=10280