UX / UI Критичний вплив Просте 2 хв

Viewport / мобільне відображення

Meta viewport забезпечує правильне відображення на мобільному.

Що це

Meta-тег viewport повідомляє браузеру, як масштабувати сторінку під ширину пристрою. Без нього мобільний відображає десктопну ширину, і все стає «дрібним і віддаленим».

Чому це важливо

Google індексує mobile-first, оцінює переважно мобільну версію. Без правильного viewport сайт провалює тест зручності використання на мобільному, що напряму знижує позиції, адже більшість відвідувань, із мобільних.

Як це зробити

1Вставте у <head> стандартний meta-тег viewport.
2Не забороняйте масштабування (maximum-scale=1 / user-scalable=no), це шкодить доступності.
3Переконайтеся, що контент не виходить за межі по горизонталі, а кнопки достатньо великі (див. UX-аудит).

Приклад

Правильно

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

Висновок

Один рядок у заголовку, але принциповий для світу mobile-first. Без нього сайт на мобільному практично непридатний для використання, і Google це жорстко штрафує. Після впровадження протестуйте на реальному телефоні та в інструменті мобільної зручності.

Повʼязані теми