Планшетные компьютеры приобретают все бОльшую популярность и начиная с 2012 года мобильные устройства стали основными для выхода в интернет.
И, как бы то печально не было, теперь нужно учитывать не старый-добрый IE6, а брать во внимание смартфоны и планшеты, которые имеют ряд особенностей при верстке.
Недавно пришлось столкнуться с тем, что заказчик проверял работу сайта на своем iPad\iPhone, а не на привычном десктопе\лаптопе на что сайт, как оказалось не был рассчитан...
Поэтому хочу поделиться со своими читателями (если таковые имеются) некоторыми основными принципами, о которых следует помнить при верстке.
Большинство устройств, на которые следует ориентироваться работают под управлением Android или iOS, а разрешение экрана может сильно варьироваться от 240х320 до 2048x1536.
Основная особенность всех этих устройств - сенсорный тип ввода данных. Отсюда первые несколько следствий:
1) Не использовать событие и параметр hover, который может срабатывать некорректно.
2) Нельзя использовать внутренний скроллинг блоков (автоматически он не обрабатывается), это можно сделать на JS, перехватывая событие прикосновения, но
3) Не следует перехватывать событие прикосновения для крупных блоков, способных занять весь экран
так как это помешает масштабированию как 2 пальцами, так и двойным прикосновением (эти события будут перехвачены и обработаны не как масштабирование)
Основной проблемой же на том сайте было даже не это... Там использовались блоки с фиксированным позиционированием, которое не приемлемо при верстке под мобильные устройства.
4) Нельзя использовать фиксированное позиционирование блоков или фона
последнее следствие того, что экран мобильного устройства значтельно меньше и для чтения применяется масштабирование, а фиксированные блоки принимают облость обзора под "экран", пытаясь на нем разместиться.
И последняя особенность, которую хочу отметить -
5) Отсутствие события scroll
Это происходит вследствие того, что страница отображается как бы "полностью", а мы просто перемещаем "экран обзора" или вроде того, суть в том что событие scroll на мобильных устройствах не вызывается. А следовательно его использовать нельзя.
Дольше всего пришлось проводиться с увеличением масштаба при повороте iPad. После поворота iPad из горизонтального в вертикальное положение, увеличивался масштаб, что смотрелось некорректно. А решается это очень просто:
<meta name="viewport" content="width=1000" />
Вместо 1000 следует указать размер блока для отображения. Например, если у вас блог с фиксированной шириной 720px, то вам следует заменить 1000 на 720. =)
И пара полезных "фишек" для подобных устройств:
внутренний скроллинг блоков (нужно учитывать 2 и 3)
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
Проверка устройства, не iPad ли это:
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) alert('This is iPad');
Комментарии