Сьогодні iPhone та iPad, далі iГаджети, перестали бути нам удивовижу, і все частіше веб розробники наштовхуються на проблему реалізації функціоналу під ці пристрої.
В даній статті ми розглянемо 2 задачі: "прокрутка пальцем" та оптимізація зображень для Retina дисплеїв.
Прокрутка пальцем
Прокрутка пальцем - невід'ємна частина функціоналу iГаджетів, адже це додає зручності і простоти використання. А чи на стільки ж проста реалізація? Тут нам на допомогу приходить бібліотека jQuery та 2 плагіни caroufredsel та jQuery Touchwipe Plugin.
Отже, приміром, нам потрібно реалізувати карусель з логотипами, які можна прокручувати. Насправді, виконати реалізацію досить просто.
/* Carousel with wipe */
(function ($) {
Drupal.behaviors.iDevelsPartnerSlide = {
attach: function (context, settings) {
var partnerList = $('.view-partner-programs.slide .view-content');
$('.pane-partner-programs.slide .pane-content').append('<div id="partner-prev" class="prev"></div><div id="partner-next" class="next"></div>');
partnerList.carouFredSel({
height: 90,
width: 880,
prev: '#partner-prev',
next: '#partner-next',
auto: false,
scroll: {
pauseOnHover: true,
wipe: true
}
});
}
})(jQuery);Приклад взятий із цього сайту, детальніше подивимося що ж там написано.
1. Drupal behaviors (для Drupal 7), якщо ваш код не використовується в Drupal, можете його опустити.
Drupal.behaviors.iDevelsPartnerSlide = {
attach: function (context, settings) {
}
}2. Присвоїмо змінній partnerList наш контейнер, в якому лежить наша карусель.
var partnerList = $('.view-partner-programs.slide .view-content')3. Додаємо кнопочки для прокрутки (наступний/попередній), не у всіх ще ж iГаджет
$('.pane-partner-programs.slide .pane-content').append('<div id="partner-prev" class="prev"></div><div id="partner-next" class="next"></div>')4. Підключаємо до нашого блоку сам плагін каруселі
partnerList.carouFredSel();
Налаштування плагіна розглядати не будемо, на сайті воно гарно описано в документації. Єдине, на чому потрібно зупинитися, це реалізація прокрутки, оскільки саме про неї йде мова.
wipe - саме цей параметр вмикає можливість прокрутки пальцем на наших іГаджетах.
scroll: {
pauseOnHover: true,
wipe: true
}Для реалізації цієї можливості підключаємо jQuery Touchwipe Plugin. Функціонал нашої карусельки готовий. Допишіть декілька рядків css, аби все набуло привабливого вигляду.
Реалізацію можна проглянути на головній сторінці цього сайту: блок з логотипами та відгуками клієнтів.
Retina
Retina (від англ retina - Сітківка) - назва РК-дисплея, що його використовують у пристроях Apple, і який відрізняється більш високим заявленим розширенням (326 точок на дюйм). Спираючись на результати досліджень, згідно яких людське око здатне розрізнити тільки 300 PPI, виробник заявляє що на таких дисплеях пікселізація зображення не спириймається оком.
Саме такі екрани мають останні моделі наших iГаджетів . На Retina екранах щільність пікселів в 4 раза більше. Тобто зображення 200x300 на Retina має 400x600.
Отже перед нами завдання допомогти користувачу скористатись можливостями його пристрою і насолоджуватись зображенням вищої якості. Проте відомо: що вища якість зображення, то більша "вага" файлу. Тому не забудьмо про користувачів, які ще не тримають iГаджета в руках: вантажити непотрібні їм мегабайти - зайвий клопіт.
Задача наша полягає у тому, що для Retina ми завантажуємо удвічі більше зображення . Працювати будемо з фоновими зображеннями для картинок.
Отже, презентуємо власне реалізацію:
.pane-services-slide.attachment {
background: url(../i/slide-menu-bg.png) scroll no-repeat center bottom transparent;
background-size: 1020px 104px;
height: 83px;
margin: 0 auto;
width: 960px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.pane-services-slide.attachment {
background: url(../i/slide-menu-bg@2x.png) scroll no-repeat center bottom transparent;
}
}Давайте розглянемо, що це все означає. У першому блоці ми задаємо стилі для нашого фону, а також його розмір. Це справа нам знайома. Наступний блок призначений для retina. Тут ми визначаємо Retina як медіа пристрій і використовуємо device-pixel-ratio, щоб встановити співвідношення між фізичним та css-пікселем.
Це умови, за яких ми завантажуємо наше об'ємніше зображення. В назві картинки використана конструкція @2x - прописувати її треба обов'язково. На даному етапі наше завдання виконане: користувачі iГаджетів насолоджуються більш чітким зображенням, у інших відпала потреба вантажити собі зайві мегабайти.
Корисні посилання по темі:
Декілька слів про Drupal.Behaviors та $(document).ready()
Оптимизація графіки для Retina-дисплеїв