Мобильные устройства, position: fixed; и во что это выливается

По ходу редизайна блога ^[1] появилось желание создать 'Scroll to Top' функцию не только для десктопа, но и для мобильных устройств. В связи с небольшим свободным пространством на экране смартфона было решено сделать кнопку возвращения на верх в виде полоски высотой в 20px прикрепленную к нижней границе экрана. Код довольно простой:

$('body').append("<div class='scroll-to-top-mobile'>Scroll To Top</div>"); // Создаем элемент на странице

$(window).scroll( function() {
   if ( $(this).scrollTop() > $(window).height() ) { // Если длинна прокрутки страницы больше высоты экрана, то...
      $('.scroll-to-top-mobile').fadeIn(); // Показать кнопку
   }   else   { // Если нет, то...
      $('.scroll-to-top-mobile').fadeOut(); // Скрыть кнопку
   }
});

$('.scroll-to-top-mobile').on('click', function() {
   $('html, body').animate({scrollTop : 0}, 800); // По клику на кнопку прокручиваем страницу вверх
   return false;
});

.scroll-to-top-mobile {
   width: 100%;
   height: 20px;
   background: #e6e6e6;
   border-top: 1px solid #ddd;
   position: fixed; /* Фиксированное размещение кнопки в окне, позиция не меняется относительно окна во время прокрутки страницы */
   bottom: 0; /* Прижимаем к нижнему краю окна */
   z-index: 9999; /* Поднимаем кнопку над всеми элементами страницы */
   text-align: center;
   display: none; /* Изначально кнопку не видно */
   cursor: pointer;
   font-size: 12px;
}

На десктопе работает отлично, но во время тестирования на Android 2.3 оказалось, что position: fixed; не работает, элемент позиционируется абсолютно. Немного поискав выяснилось, что фиксированное позиционирование не поддерживается в iOS до 5й версии и в Android до 3й версии. О поддержке остальными браузерами пишут здесь ^[2].

Там же говорят о том, что Android 2.3 можно научить понимать данное свойство с помощью медиа запроса:

@viewport {
   user-zoom: fixed;
}

Или используя meta-тег:

<meta name=”viewport” content=”user-scalable=no” />

Эта функция отключает возможность масштабирования страницы.

Теперь, без возможности зума документа актуальным становится вопрос о читаемости текста на экрана смартфона. Визуальный размер текста на экране десктопа отличается от размера на экране смартфона, подробнее об это здесь ^[3]. Т.к. блог полностью построен по технике RWD, то делать отдельную версию для телефонов не имеет смысла. Здесь может помочь идентифицирование мобильных устройств с помощь медиа запроса device-aspect-ratio. Эта функция позволяет применять содержащийся в ней CSS только на устройствах с заданным соотношением сторон. На iPhone этот показатель равен 1.5, на Android 1.3 — 1.5. Таким образом можно определить нужные нам устройства и задать для них оптимальный размер шрифта на странице:

@media all and (max-device-aspect-ratio: 1.5) {
	body {
		font-size: 16px;
		line-height: 1.4em;
	}
}

Или с помощью meta-тега:

<link rel=”stylesheet” href=”css/mobile.css” type=”text/css” media=”all and (max-device-pixel-ratio: 1.5)” />

Протестировав новые настройки на своем Android 2.3 я обнаружил, что параметры заданные с помощью медиа запроса вступают в силу только после перезагрузки страницы, а иногда и не одной. Здесь на помощь пришло замечательное решение ^[4] стоимостью в несколько строк JS кода. Мы можем определить мобильное устройство с помощью простого скрипта ^[5]:

// Определяем устройство
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windowssce|palm/i.test(navigator.userAgent.toLowerCase()));
if(mobile){
   // Создаем ссылку на CSS
   var cssLink = document.createElement("link");
   cssLink.setAttribute("type", "text/css");
   cssLink.setAttribute("rel", "stylesheet");
   cssLink.setAttribute("href", "css/mobile.css");
   document.head.appendChild(cssLink);
}

navigator.userAgent возвращает строку User-Agent'а, дальше мы ищем в нем название одного из указанных устройств. Если такое имеется, то создаем для него ссылку на CSS файл содержащий нужные нам параметры для адаптирования текста под мобильный экран. Правда из-за того, что скрипт срабатывает только после загрузки документа, параметры из подключенного CSS вступают в силу через 1 — 1.5 секунды.

Так вот простая функция 'Scroll to Top' тянет за собой череду проблем, благо решение для каждой из них есть.

Ссылки

• Список браузеров поддерживающих position: fixed; ^[2]
• Определение мобильного устройства с помощью JS ^[5]
• Создание ссылки на CSS с помощью JS ^[4]

Автор: roman01la