Распространенные ошибки Responsive Design

539
views

responsive design
Представьте себе ситуацию, когда Вы часами трудились над макетом, отшлифовали все элементы под все размеры экранов и вроде бы, в режиме отзывчивого дизайна во всех браузерах все нормально, но вот открываете сайт на телефоне и все выглядит не так, как Вы задумывали. Шрифты больше, анимации медленные, элементы формы сами на себя не похожи. И Вам приходится тратить драгоценное время на поиски в интернете решения проблемы. В данной статье я расскажу о часто встречаемых подводных камнях, знание которых, существенно сэкономит время при разработке.

Неожиданные изменения размеров шрифтов

При переворачивании iOS устройства из портретного режима в горизонтальный размеры шрифта могут увеличится, тем самым сломав верстку. Чаще всего это касается элементов навигации и размер может быть возвращен лишь при перезагрузке страницы. Для того, что бы это не происходило необходимо добавить в css:

html {
    /* Устанавливает желаемый относительный размер шрифта */
    -webkit-text-size-adjust: 100%;
}

Данным свойством мы укажем браузеру как относительно увеличения элементов должен увеличиваться размер шрифта.

Стили формы

В браузерах есть свойства, которые присвоены элементам по умолчанию, некоторые из них присваиваются только в мобильных браузерах.

input[type=text], button, select, textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0px;
}

Если Вы захотите сбросить стили для всех типов input, то нужно заменить input[type=text] на просто input. Таким образом сбросятся стили для чекбоксов, radio buttons и т.д.

Увеличение страницы при клике на элементы формы.

На устройствах компании apple при нажатии на инпут или селект, если в нем шрифт задан меньше 16px, то то страница будет увеличена. Для избежания этого можно добавлять в css:

@media(max-width:767px){
    input,select,textarea {
        font-size:16px;
    }
}

Данные строки можно прописывать в reset.css  по умолчанию, а в дальнейшем задавать стили какие необходимы (если вдруг нужен шрифт больше 16px).

Анимации блоков не плавные или вовсе тормозят страницу

Чаще всего для анимации элементов используют такие свойства:

transform: translate(15px, 40px); /* двигает элемент */
transform: scale(2); /* увеличивает/уменьшает */
transform: rotate(30deg); /* вращает */
opacity: 0.5; /* устанавливает прозраность */

Современные браузеры достаточно одинаково быстро работают с ними. Но всегда нужно помнить, что верстка страницы, это как стол с блюдами на нем. И вращать какую-то иконку или менять прозрачность кнопки это как вращать ложку на столе, в то время, если задать анимацию блоку, который содержит множество дочерних элементов это как вращать уже весь стол. А представьте если на странице множество таких элементов. Поэтому задавать анимацию нужно всегда с умом, стараясь что бы в блоке было как можно меньше дочерних элементов.

Иногда тормозить работу анимаций могут еще box-shadow, но это только в том случае, если тень задана чуть ли не у каждого элемента страницы.

Координаты touch и click отличаются

Если у Вас на front-end’е используется javascript для навигации или еще каких либо нужд, в которых отслеживаются координаты нажатия, то для мобильных устройств координаты при касании могут отличаться от координат, которые бы были при клике (событии click) в той же самой области. Устройства на iOS это не касается, но для android устройств такая проблема есть. Поэтому лучше использовать для мобильных устройств событие:

document.ontouchstart = function(e){
    var x = e.touches[0].pageX; // координата Х
    var y = e.touches[0].pageY; // координата У
    console.log('x = ' + x + ', y = ' + y); // вывод в консоль
}

Таким образом координаты при нажатии на экран для всех мобильных устройств будут одинаковы.

Также хочу напомнить, что содержание события в нативном js отличается от события, если вы используете jQuery.

Сравнить содержание событий можно данным кодом:

$(document).on('touchstart', function(ev){
    console.log(ev); // jQuery version of event data
    console.log(ev.originalEvent); // native JavaScript version of event data
});

 Итог

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