Главная

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

2012-06-18 в 18:10, admin, рубрики: android, css, css3, media queries, веб-дизайн, Веб-разработка, метки: android, css3, media queries

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

По ходу редизайна блога появилось желание создать '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й версии. О поддержке остальными браузерами пишут здесь.

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

@viewport {
   user-zoom: fixed;
}

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

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

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

Теперь, без возможности зума документа актуальным становится вопрос о читаемости текста на экрана смартфона. Визуальный размер текста на экране десктопа отличается от размера на экране смартфона, подробнее об это здесь. Т.к. блог полностью построен по технике 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 я обнаружил, что параметры заданные с помощью медиа запроса вступают в силу только после перезагрузки страницы, а иногда и не одной. Здесь на помощь пришло замечательное решение стоимостью в несколько строк JS кода. Мы можем определить мобильное устройство с помощью простого скрипта:

// Определяем устройство
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' тянет за собой череду проблем, благо решение для каждой из них есть.