Зараз все більше і більше додатків розробляються спеціально для мультитач пристроїв. Саме тому важливо знати, як можна контролювати і управляти спеціальними подіями, характерними для цих пристроїв.
Однак розробники не можуть передбачити всі випадки. Виникають ситуації, коли те ж подія CSS: hover працює непередбачувано на сенсорних пристроях. В цьому випадку, вам потрібно буде або міняти весь додаток або зробити його інтерфейс доброзичливим для мультитач девайсів.
Основні поняття
На даному етапі розвитку мобільних пристроїв, розмір екранів не дає ніяких гарантій в тому, що пристрій є сенсорним. Є кілька речей, які потрібно взяти на замітку:
- Переконайтеся в тому, що розмір екрану як мінімум 50px × 50px. Навряд чи на ще більш дрібних пристроях буде зручно користуватися тач-жестами.
- Безліч користувачів будуть пересуватися по вашому сайту, прокручуючи його на екрані. Переконайтеся в тому, що вони зможуть легко отримати доступ до тих елементів сторінки, які ви вважаєте важливими.
- Неминучість затримок. На даний момент безлічі мобільних платформ здійснюють затримку 300 мілісекунд, при використанні тач-подій. Іноді такі гальма можуть сильно дратувати.
Визначаємо чи є пристрій сенсорним
Ідеального рецепту немає. Особливо це стосується IE 10, який іноді приймає не сенсорні пристрої за сенсорні. Найбільш ефективний спосіб визначення:
Дану функцію можна включити будь-де:
Управління тач-подіями
Залежно від контексту і платформи, тач-жести залежать від наступних подій:
touchstart → mouseneter → mousedown → click → mouseup → mouseleave → touchend
Наявність і порядок даних дій залежить від платформи; не всі вони реагують на CSS властивості: hover або: focus. Для відключення даних подій, можете скористатися JQuery:
У більшості випадків немає потреби відключати все. Можете зупинитися на чомусь одному:
Однак, все що ми відключаємо, можна активувати назад:
Відключаємо подія подвійного натискання
Подвійне натискання використовується для збільшення зображень чи зуму ... знову ж для різних пристроїв по-різному. Зробити це можна так:
Дане рішення не є ідеальним для всіх мобільних браузерів.
Що щодо зуму?
Так само ми можемо відключити зум:
Будьте обережні, відключаючи зум, адже часом це єдиний спосіб наблизити текстовий контент.
Сьогодні ми хотіли б поділитися кількома ідеями стосується ефекту блочного розкриття, яку ви можете використовувати для своїх проектів.
Якщо ви хочете істотно підвищити рівень безпеки вашого сайту на WordPress, то вам не уникнути конфігурації файлу .htaccess. Це дозволить не тільки уберегтися від цілого ряду хакерських атак, а й організувати перенаправлення, а також вирішити завдання пов'язані з кешем.
Material Design - це набирає обертів тренд від Google. У даній збірці зібрані безкоштовні теми для WordPress, виконані в цьому популярному стилі.
Ефекти на те й існують щоб вражати наших відвідувачів. У цій збірці зібрано кілька десятків ресурсів, чиї творці дуже постаралися вразити своїх відвідувачів.
Під кінець місяця пропонуємо ознайомитися з набором безкоштовних матеріалів для веб дизайнерів за минулий місяць.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!