mobile | Wiki | PWODEV

Viewport — мета тег для нормальной верстки для мобильного устройства.

Paul Osmachko — Tue, 24 Oct 2017 09:19:16 +0000

Viewport это штука без которой нельзя обойтись. Если вы верстаете под мобильное устройство iPhone или Android да и вообще любое другое устройство, правильно чтобы верстка отображалась одинаково на всех видах экрана, чтобы не было косяков и все было корректно по дизайну.

Если вы верстаете правильно, а так и надо, то вам пригодится очень важный тег который позволит убрать стандартное увеличение, зум (zoom) и чтобы ширина (width) и высота (height) на мобильном (mobile) устройстве отображалась пиксель в пиксель, только тогда мы сможем видеть реальные размеры на лубом размере экрана.

Вот собственно сам мета тег:

Вставлять его надо в самом вверху после открытия

Сообщение Viewport — мета тег для нормальной верстки для мобильного устройства. появились сначала на Wiki | PWODEV.

jQuery touch swipe или как отследить жесты

Paul Osmachko — Tue, 24 Oct 2017 06:58:09 +0000

Что такое жесты и какие они бывают:

Swipe — пролистывание как слайд, обычно используется для открытия меню жестом, провести пальцем по экрану слева на право чтобы открылось меню.
hold — событие долгому длинному нажатию

Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку jquery.touchSwipe.min.js. Дальше привязываем событие к нужному нам элементу:

jQuery('body').swipe({
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 console.log(direction);
 }
});

Теперь мы можем дополнять наш сайт жестами.

Если нам нужно чтобы событие жест сработал в реальном времени или через определенное количество пикселей пишем такую функцию:

jQuery('body').swipe( {
    swipeStatus:function(event, phase, direction, distance, duration, fingerCount, fingerData, currentDirection)
    {
        if (phase=="start"){
            // сработает в начале swipe
        } 
        if (phase=="end"){ 
            //сработает через 20 пикселей то число которое выбрали в threshold
            if (direction == 'left') {
                //сработает при движении влево
            }
            if (direction == 'right') {
                //сработает при движении вправо
            }
            if (direction == 'up') {
                //сработает при движении вверх
            }
            if (direction == 'down') {
                //сработает при движении вниз
            }
 },
 triggerOnTouchEnd:false,
 threshold:20 // сработает через 20 пикселей
});

Параметры:

event — стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт

jQuery(event.target)

phase

start — указывает начальную фазу события касания
move — указывает на событие перемещения
end — указывает на завершение события
cancel — указывает на отмену события

direction

left — указывает на передвижение влево
right — указывает на передвижение вправо
up — указывает на передвижение вверх
down — указывает на передвижение вниз
in — указывает на событие помещения в обьект
out — указывает на событие выхода из обьекта

distance — расстояние которое пользователь пролистал

duration — продолжительность пролистывания в миллисекундах

fingerCount — количество пальцев при таче

fingerData — координаты пальцев при событии тач

currentDirection — текущее направление движения тача

Сайт библиотеки плагина и документации к плагину

Сообщение jQuery touch swipe или как отследить жесты появились сначала на Wiki | PWODEV.

Height 100vh for mobile browsers iPhone and Android

Paul Osmachko — Wed, 18 Oct 2017 13:29:39 +0000

При высоте контейнера height:100vh; на мобильных устройствах, этот контейнер немного перекрывается адресной строкой вверху, либо панелью управления мобильного браузера внизу. Мобильном устройстве, при прокрутке страницы ниже, адресная строка и панель управления убираются, после чего наш контейнер показывается полностью.

Отследить правильный размер экрана нам поможет этот JS код:

window.innerHeight //показывает действительную высоту экрана

Запускать это лучше всего при загрузке страницы, а потом при скролле браузера.
Событие scroll:

window.onscroll = function () {
   // scroll event
};

Сообщение Height 100vh for mobile browsers iPhone and Android появились сначала на Wiki | PWODEV.