Я обнаружил несколько вещей в своих недавних попытках с iPad.
1: В версии 4.2 в iOS есть ошибка, при которой выполняется слишком много document.getElementById ('foo');приведет к зависанию браузера и, следовательно, не выполнит команды правильно.Чтобы исправить это, вам нужно создать переменные для хранения этой информации и выполнять команды выбора только при необходимости.Версия 4.3 iOS действительно исправляет это, поскольку я тестировал это на своем iPad.
2: При работе с позиционированием я обнаружил, что при создании собственного видеоконтроллера (для html5), если вы попытаетесь изменить размер контейнера видео, используя position: относительный или position: absolute, вы больше не увидите видео, но получите хороший черный экран (со звуком!).Чтобы исправить это, просто наведите курсор на родительский фрейм, и все готово.
3: Если вы используете iScroll , обязательно поставьтевремя ожидания загрузки;особенно если у вас есть несколько других javascript-скриптов на странице, даже если документ загружается при «загрузке страницы» с помощью:
// 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's been a few years, and there is so much more to add to this so wanted to update the list a bit.
5: Javascript стоит дорого на нескольких устройствах до сих пор (декабрь 2012 г.).Выполнение действий, которые манипулируют DOM, приводит к большим задержкам на устройствах, и вы должны быть очень осторожны при выполнении этих действий.Обязательно протестируйте свои мобильные веб-страницы как на старых устройствах Android, так и на старых устройствах iPhone, поскольку по нашим показателям это все еще хорошо используемые устройства.
6: Если выПередача HTML для загрузки в веб-виде на устройстве (iPhone App или Android App) бывают случаи, когда вы видите почти высоту 0. Что вам нужно сделать, это сделать, чтобы приложение iPhone или Android выполняло вызов Javascript на фактическомстраница, нацеленная на div, чтобы проверить смещение страницы, которое затем позволит точно установить высоту веб-просмотра.
**UPDATE - Dec 2012 **: Few more awesome findings
7: Я обнаружил, что когда вы выбираете div для событий click, мобильные браузеры будут ждать 300 мс, прежде чем запускать событие, эффективно создаваялаг.Они делают это, чтобы подтвердить, что щелчок не был двойным нажатием.чтобы избежать этого, вы можете вместо этого связать события касания, которые будут срабатывать мгновенно!
Вот фрагмент кода
$(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 и более ранних версиях, так как это вызывает крайне странное поведение.
Исходя из моих выводов, Android сделает это совершенно неправильно и заставит html даже испортиться.Лучший способ при работе с этими старыми устройствами - это, к сожалению, изменить фактическое имя файла.
Надеюсь, что эти выводы помогут другим, так как я несколько часов боролся с каждой из этих проблем, почесывая голову:)