Все статьи | Блог студента

Убираем с сайта белые полосы при горизонтальной ориентации iPhone. Понадобится для первого проекта по верстке

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Убираем с сайта белые полосы при горизонтальной ориентации iPhone. Понадобитс... главное изображение

Думаю, вы — как и — я столкнулись с одной проблемой при адаптации первого проекта на Хекслете для разных устройств, а именно:

iPhone зачем-то добавляет белые полосы по бокам сайта 😑😑😑

enter image description here

Как же это исправить?

Всё очень просто, нужно лишь добавить viewport-fit=cover в meta-тег.

Вот пример:

meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"

И итоговый результат:

enter image description here

А на этом у меня всё 😉

Аватар пользователя Шахзод Давлатов
Шахзод Давлатов 03 сентября 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев