Представь это. Вы только что создали адаптивный шедевр, а затем проверите его на мобильном устройстве. Вещи ломаются так, как вы никогда не ожидали. Текст набирает обороты, анимации изменчивы, а ваши формы не похожи на то, как вы их стилизовали. Вы часами рыскаете по интернету, чтобы найти ответы в кругах. В отчаянии вы выбрасываете компьютер в окно и случайно ударяете соседского кота.
Хорошая новость заключается в том, что я здесь, чтобы защитить вас от ловушек мобильных разработок, которые приведут к тому, что вы выбросите компьютер из окна. Вот основные подводные камни, которые мы собираемся охватить:
- Неожиданные изменения размера шрифта
- Нежелательные стили формы
- Ошибки эмулятора, которые могут заставить вас думать, что у вас есть проблемы, когда вы этого не делаете
- Анимации, которые хорошо выглядят на рабочем столе, но выглядят нестабильными на мобильных устройствах
- События касания, координаты которых не регистрируются должным образом, даже при отсутствии ошибок
Давайте начнем!
Предположения для этого урока
В этом руководстве предполагается, что вы немного знакомы с основами адаптивной веб-разработки, но на тот случай, если вам нужно освоиться, я написал краткое руководство .
1. Неожиданные изменения размера шрифта
Поворот устройства iOS в сторону может изменить размер текста на ваших страницах и испортить макеты. Эта проблема часто возникает с элементами фиксированного положения, такими как навигационные панели и меню. Как только это произойдет, единственный способ исправить это — обновить страницу. К счастью, есть способ остановить нежелательные изменения размера текста, прежде чем они произойдут.
Вставьте этот код в ваш CSS:
html { /* Prevent font scaling in landscape while allowing user zoom */ -webkit-text-size-adjust: 100%; } Этот код обнуляет настройку размера шрифта в альбомной ориентации, говоря: « Эй, браузер.
Если вы собираетесь настроить размер текста в альбомном режиме, настройте текст на 100% от его текущего размера, или, другими словами, того же размера.
Проблема решена.
2. Нежелательные стили формы
Планшеты и мобильные устройства часто поставляются со стилями по умолчанию, которые могут испортить ваши формы. Чтобы избавиться от стиля по умолчанию для элементов формы, поместите следующий код в свой CSS:
input[type=text], button, select, textarea{ -webkit-appearance: none; -moz-appearance: none; border-radius: 0px; }
Не стесняйтесь смешивать и сочетать в зависимости от того, какие типы стилей элементов формы вы хотите сбросить. Например, если вы хотите сбросить стили всех типов ввода, замените input[type=text] на input . Имейте в виду, что это также повлияет на ваши флажки и переключатели, поэтому убедитесь, что вы собираетесь это сделать.
3. Ошибки эмулятора могут ввести в заблуждение
Если вы тестируете свои сайты с помощью мобильного эмулятора на основе браузера, иногда сам эмулятор может запутаться. Это один из самых хитрых видов ошибок, потому что вы увидите проблему, даже если с вашим кодом все в порядке.
Например, однажды у меня была панель навигации, которая постоянно исчезала из нижней части разрабатываемой мной страницы. Попытавшись выяснить, в чем дело, я обнаружил, что область просмотра эмулятора Chrome в нижней части обрезается. Проблема в том, что половина полосы прокрутки исчезла внизу страницы. Я решил проблему, открыв страницу на новой вкладке, выключив и включив мобильное представление, а затем обновив.
В подобных ситуациях важно сначала убедиться, что с вашим кодом все в порядке. Я предлагаю изолировать проблемную область и посмотреть, работает ли код сам по себе. Если код работает, попробуйте его на реальном мобильном устройстве. Если это работает там, есть вероятность, что ваш эмулятор может быть источником проблемы.
4. Плавная анимация на рабочем столе может быть грубой на мобильном
Если вы используете анимацию на мобильных устройствах, обратите особое внимание на производительность. В общем, браузеры могут эффективно анимировать следующие свойства: translate , scale , rotate и opacity . Вот примеры того, как это может выглядеть.
transform: translate(15px, 40px); /* shift left 15px and down 40px */ transform: scale(2); /* scale to 2 times original size */ transform: rotate(30deg); /* rotate 30 degrees */ opacity: 0.5; /* set opacity at 0.5 */
Причина, по которой вы хотите анимировать эти свойства, заключается в том, что они расположены на верхнем слое того, что отображает браузер. Если вы рассматриваете веб-страницу как обеденный стол, анимация вещей на верхнем слое — это как перемещение одной ложки, а анимация на нижних слоях — это как попытка переместить всю скатерть. Вы можете сделать это, но это больше работы, потому что вы перетаскиваете все верхние слои вместе с ним.
Для получения дополнительной информации о высокопроизводительных анимациях см. Эту статью .
Чтобы максимизировать поддержку браузером ваших анимаций, особенно на устройствах iOS, -webkit- префикс -webkit- в свойствах преобразования. Вот пример:
-webkit-transform: rotate(30deg); transform: rotate(30deg);
Для получения дополнительной информации о совместимости вы можете обратиться к этой таблице
Как примечание, тени от ящиков иногда могут замедлять анимацию на мобильных устройствах в зависимости от того, насколько интенсивно они используются и что еще происходит на странице. Для теней я рекомендую протестировать, чтобы увидеть, с чем можно сойти.
5. Координаты касания хранятся по-разному Координаты щелчка
Извлечение координат события касания может быть сложным, потому что эти координаты могут храниться в разных местах в зависимости от устройства. На некоторых устройствах (например, iOS) вы можете найти сенсорные координаты в том же месте, что и координаты щелчка, но на других устройствах (например, Android) вы должны искать в другом месте. Хорошей новостью является то, что координаты касания можно найти в специализированных данных о событиях касания любого мобильного устройства, которое вам реально необходимо поддерживать.
Для событий касания используйте e.touches[0].pageX вместо e.pageX чтобы получить координату x этого касания. Замените все экземпляры X на Y, чтобы получить координату y. Вот несколько примеров, чтобы вы могли сравнить, как этот код выглядит на практике.
Для щелчка мыши, вы можете получить координаты, как это:
document.onclick = function(e){ var x = e.pageX; // get x coordinate of click var y = e.pageY; // get y coordinate of click console.log('x = ' + x + ', y = ' + y); // show coordinates in console }
Для сенсорного события вы можете получить координаты следующим образом:
document.ontouchstart = function(e){ var x = e.touches[0].pageX; // get x coordinate of touch var y = e.touches[0].pageY; // get y coordinate of touch console.log('x = ' + x + ', y = ' + y); // show coordinates in console }
Даже на устройствах, где e.pageX и e.pageY не работают, они все равно будут доступны, но они будут e.pageY 0 для событий касания, несмотря ни на что. Причина, по которой я упоминаю об этом, заключается в том, что вы не будете думать, что проверка их существования достаточна, чтобы убедиться, что они действительно работают.
Если вы когда-нибудь забудете, где найти координаты для события, вы можете использовать консоль, чтобы проверить это. Для этого я предлагаю мобильный эмулятор Chrome, потому что он показывает объекты JavaScript в удобочитаемой форме. Вот код, чтобы увидеть, какие данные ontouchstart событие ontouchstart :
document.ontouchstart = function(e){ console.log(e); // show data from ontouchstart event }
Если вы используете события jQuery, имейте в виду, что они имеют свой собственный набор данных. Вы можете увидеть различия с помощью следующего кода:
$(document).on('touchstart', function(ev){ console.log(ev); // jQuery version of event data console.log(ev.originalEvent); // native JavaScript version of event data });
Обнаруживаете ли вы места щелчков мыши или касаний, ключевой момент — убедиться, что вы правильно получаете доступ к своим координатам. Если есть сомнения, проверьте это .
Вывод
Мы рассмотрели некоторые важные ловушки для мобильной разработки, в том числе неожиданные изменения размера шрифта, нежелательные стили форм, вводящие в заблуждение ошибки эмулятора, нестабильные анимации и неправильное определение координат касания. Надеемся, что информация в этой статье сэкономит вам много времени и душевных страданий.
Если у вас есть какие-либо вопросы или пункты, чтобы добавить, не стесняйтесь оставлять комментарии.