Уявіть, що ви довго працювали над чуйним дизайном сайту і тепер перевіряєте його на мобільному. І ваш дизайн розсипається, причому так, як ви цього зовсім не очікували. Текст йде шкереберть, анімація відтворюється ривками, а форми зовсім не схожі на ті, що ви робили. Ви витрачаєте години на пошук рішення в інтернеті і відповіді водять вас по колу. Псіханув, ви викидаєте свій комп'ютер з вікна і випадково вбиваєте сусідського кота.
Хороші новини полягають в тому, що сусідського кота можна врятувати, також як і ваш комп'ютер - в цій статті ми розглянемо основні підводні камені чуйного дизайну:
- Несподівані зміни розміру шрифту.
- Небажані стилі форм.
- Помилки емулятора в браузері, що повідомляють про проблеми, яких немає.
- Повільна анімація на мобільних пристроях
- Невірна обробка координат дотику.
Базові вимоги для розуміння матеріалу.
Читання цієї статті вимагає від вас базових знань про чуйну веб-розробці. Їх можна почерпнути, наприклад, з цієї статті.
1. Несподівані зміни розміру шрифту
Як змінити орієнтацію екрана на пристроях з IOS може змінити розмір тексту на ваших сторінках і зруйнувати розкладку. Ця проблема регулярно зустрічається у елементів з фіксованим позиціонуванням типу панелей меню або навігації. А після того як це сталося, виправити розкладку можна тільки відновивши сторінку. На щастя, є спосіб запобігти небажані зміни розміру тексту.
Просто вставте наступний рядок коду CSS:
Цей код вимикає настройки розміру шрифту альбомного формату, просто кажучи браузеру: "Гей, якщо ти збираєшся поліпшити цей розмір шрифту, роби його не більш поточного розміру, тобто залиш все як є."
2. Небажані стилі форм
Браузери планшетів і мобільних телефонів часто містять дефолтні стилі, які можуть зіпсувати вигляд ваших форм. Щоб позбутися від стилів за замовчуванням в ваших елементах форм, додайте наступний код CSS:
Ви можете спокійно змінювати його з урахуванням використовуваних вами типів форм і застосовуваних стилів. Наприклад, якщо вам треба скинути стилі для всіх типів інпут, змініть input [type = text] на input. Але будьте готові до того, що таке скидання також вплине і на чекбокси з радіокнопку, завжди вибирайте селектор правильно.
3. Помилки емулятора, що повідомляють про проблеми, яких немає.
Якщо ви тестируете свої сайти з використанням режиму емуляції мобільного пристрою в браузері, враховуйте, що емулятор не завжди правий. Це одна з найбільш неприємних помилок, коли ви отримуєте повідомлення про проблему і не бачите в своєму коді нічого неправильного.
Наприклад, одного разу у мене пропадала з футера панель навігації. Після довгих спроб з'ясувати в чому справа, я помітив, що емулятор Chrome просто обрізав нижню частину області видимості. З'ясувалося це тому, що я звернув увагу на те, що внизу сторінки на половину обрізалася смуга вертикального прокручування. Для вирішення проблеми потрібно просто відкрити сторінку в новій вкладці, включити / вимкнути мобільний режим і потім оновити сторінку.
У ситуаціях подібних до цієї важливо в першу чергу упевнитися, що з вашим кодом все в порядку. Я пропоную ізолювати проблемну ділянку, якщо бачу, що код працює сам по собі. Якщо код працює, перевірте його на реальному мобільному пристрої. І якщо все буде нормально, то швидше за все проблема не з кодом, а з емулятором.
4. Повільна анімація на мобільних пристроях
Якщо ви використовуєте анімації на мобільних пристроях, вам варто більше уваги приділяти їх продуктивності. Власне, браузери ефективно анімуйте наступні 4 властивості: translate. scale. rotate і opacity. Ось як це може виглядати:
Ці 4 властивості добре анімуються тому, що вони знаходяться в верхньому шарі того, що рендерить браузер. Якщо уявити веб-сторінку як обідній стіл, то анімація цих властивостей буде те саме що зрушення ложки або виделки, а анімація інших буде висмикуванням всій скатертини. Ви можете зробити це, але це зажадає набагато більшої роботи, ніж перетягування на верхніх рівнях.
Більше інформації про високопродуктивних анімаціях можна почерпнути з цієї статті.
Щоб домогтися максимальної кросбраузерності ваших анімацій, особливо на пристроях Apple, додайте префікс -webkit- до властивостей трансформації. наприклад:
Більш докладні відомості про підтримку анімації властивості transform є на caniuse.
Як доповнення зазначу, що наявність тіней (box-shadow) може іноді істотно сповільнити анімацію на мобільних пристроях, в залежності від кількості анімацій і загальної ваги сторінки. І у випадку з тінями я рекомендую ретельно тестувати продуктивність анімацій.
5. Невірна обробка координат дотику.
Для отримання координат дотику може бути складним тому, що різні пристрої можуть зберігати ці координати в різних місцях. Залежно від телефону (IOS) координати будуть там же де і координати кліка, а на інших (Android) їх треба шукати в інших місцях. Хороші новини полягають в тому, що координати торкання можуть бути знайдені в спеціалізованих даних про події торкання будь-якого мобільного пристрою, який вам треба підтримувати.
Для подій торкання треба використовувати e.touches [0] .pageX замість e.pageX. щоб отримати правильні координати торкання; те ж саме відноситься і до координат для Y. Ось кілька прикладів, щоб ви могли оцінити, як цей код виглядає на практиці.
Координати кліка мишкою ви отримуєте зазвичай так:
А для отримання координат дотику потрібен наступний код:
Якщо на пристроях не працюють e.pageX і e.pageY. вони будуть як і раніше доступні, але їх значенням для подій торкання буде 0. Я згадав це тому, що проста перевірка їх існування в браузері не означає його нормальному функціонуванню.
Якщо ви використовуєте події jQuery, враховуйте, що в них є свій набір даних. Ви можете оцінити відмінності від попереднього коду:
Незалежно від того, визначаєте ви розташування натискань миші або торкань, ви повинні переконатися, що витягаєте координати правильно.