Viewport

Чтобы сообщить браузеру, что ваша страница адаптируется к любым устройствам, добавьте в заголовок документа такой метатег:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Retina-экран

• Используйте изображения в формате SVG.
• Для растровых изображений используйте двукратный размер и свойство background-size.

Border в 1px

Часто дизайнеры требуют сделать границу блока шириной в 1 физический пиксель. Если присвоить блоку свойство border: 1px solid #000, на Retin'е это будет выглядеть жирной полосой в 2 физических пикселя. Раньше эту проблему решали путем создания картинки, которой обтягивали бордер с помощью свойства border-image. А это лишнее обращение к серверу. Начиная с iOS 8 и Android 4.4, стандартные браузеры на базе WebKit поддерживают дробные свойства border: .5px solid #000. На данный момент поддержка этого способа на используемых девайсах равна 97% на iOS и 75% на Android.

В рамках курса «BitrixMobile - создание кроссплатформенных мобильных приложений» подробно рассмотрены возможности библиотеки BXMobileApp, которая позволяет создавать сложные бизнес-приложения на BitrixMobile.