Вьюпорты и адаптивность

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

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

1. смартфоны (до 768 пикселей);

2. планшеты (до 1024 пикселей);

3. десктопы (ноутбуки, персональные компьютеры и телевизоры от 1024 до 1600 пикселей включительно)

4. широкие десктопы (ноутбуки, персональные компьютеры и телевизоры с относительно большим экранным разрешением — более 1600 пикселей).

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

	Смартфоны	Планшеты	Десктопы	Широкие десктопы
Горизонтальная ориентация	ml (mobile landscape, 321–480)	tl (tablet landscape, 768–1023)	d (desktop, 1024–1600)	wd (wide desktop, 1601–∞)
Вертикальная ориентация	mp (mobile portrait, 1–320)	tp (tablet portrait, 481–767)	-	-

В Чанкере у сайта не предполагается наличия отдельной мобильной версии и вёрстка макета делается адаптивной. Это означает, что вне зависимости от категории устройства, на экране отображается один и тот же контент. Но оформление и логика работы элементов управления может отличаться в соответствии с вьюпортом и механизмом взаимодействия.

Для смартфонов и планшетов характерно взаимодействие с помощью тачскринов. Также такие устройства часто используются на ходу. Эти особенности вынуждают делать экранные элементы управления в мобильных вьюпортах не менее 50 пикселей по меньшей стороне. В более компактные контролы сложно попадать неуклюжим (по сравнению с курсором компьютерной мыши) пальцем, особенно когда устройство недостаточно зафиксировано. На компьютерах, где в качестве манипулятора выступает компьютерная мышь, размер элемента управления по меньшей стороне рекомендуется делать не менее 16 пикселей (стандартный размер курсора).