Viewport: видимата област и подредбата на мобилната страница

Полезно е да знаеш

Когато отворим страница на телефон, не гледаме просто умалена снимка на настолен екран. Браузърът трябва да определи областта, спрямо която ще подреди съдържанието. Понятието viewport обозначава областта за представяне, като при мобилните устройства има полезно разграничение между областта за оформление и действително видимата област. Това помага да се обяснят случаи, в които увеличението, екранната клавиатура или размерът на прозореца променят начина, по който човекът вижда страницата. [1]

HTML настройката meta с име viewport дава указания за размера и поведението на тази област. Често използваната стойност width=device-width обвързва ширината с устройството в CSS пиксели, а initial-scale определя началното увеличение. [2] CSS пикселът е единица за оформлението и не трябва механично да се приема за един физически пиксел на дисплея. Затова разговорът за мобилен дизайн е по-точен, когато описва използваемото пространство и четимостта, вместо да разчита само на рекламната резолюция на телефона.

Нека разгледаме измислена страница с разписание. Тя има заглавие, филтър и таблица с часове. На тесен екран въпросът не е само дали всички колони могат да бъдат смалени. Нужно е да се реши какво трябва да бъде видимо първо и дали часовете остават лесни за сравняване. Настройката на viewport е част от техническата основа, но не подрежда съдържанието вместо автора. Тя не избира кои колони да бъдат обединени или как да се представи дълго име на спирка.

Разликата между layout viewport и visual viewport става особено важна при увеличение. Видимата област може да показва само част от оформения документ. [1] В практическа проверка е полезно страницата да бъде разгледана и при увеличен текст или мащаб, а не само в началния си вид. Остава ли избраният час до името на съответното събитие? Може ли човекът да разбере накъде да продължи? Тези въпроси проверяват използването на съдържанието в различни условия.

Ограничаването на увеличението може да създаде проблеми за хора, които разчитат на него за четене. MDN изрично предупреждава за рисковете от забраняване на мащабирането чрез viewport настройките. [2] Затова при търсене на решение за разместване е по-полезно първо да се разгледа самото оформление. Забраната на действие на посетителя не обяснява защо таблицата е трудна за използване. Добрата проверка започва от конкретното съдържание и неговите размери.

За завършен преглед можем да използваме тесен и широк прозорец, завъртане на устройството и включена екранна клавиатура при филтъра. Записваме какво остава видимо и дали задачата се изпълнява без догадки. Така viewport престава да бъде магически ред в началото на HTML файла. Той се превръща в разбираема част от връзката между браузъра, пространството за оформление и действителния начин, по който човекът чете и използва страницата.