страница больше чем экран
Контент шире экрана
Добрый день, дорогие читатели блога! Сегодня я расскажу Вам про трудности возникших у многих вебмастеров. Наверняка многие из Вас сталкивались с сообщением в выдаче Google, в котором говорилось о том, что страница сайта не оптимизирована для мобильных устройств. Переходя по ссылке, Вы проверяете совместимость с мобильными девайсами и Вам выдается 2 ошибки отображения: контент шире экрана и интерактивные элементы расположены слишком быстро. Сегодня я расскажу Вам, как решить эту проблему.
Сообщение о не оптимизированной странице в выдаче Google
Оптимизация отдельной страницы под совместимость с мобильными устройствами
Проблема контент шире экрана появляется у многих сайтов. Что самое сложное, такая проблема всплывает даже в том случае, если у Вас адаптивный шаблон сайта или сделана отдельная мобильная версия. Именно созданием отдельной мобильной версией я пытался решить данный вопрос, однако все оказалось гораздо проще. Немного о других попытках решения данной проблемы:
Если Вы читали о решение данной проблемы в интернете, то можно найти множество способов решений, которые не принесут реального результата. Для решения проблемы достаточно решить всего одно несоответствие. Нет необходимости в правке CSS кода и изменения PHP кода сайта. Мой способ подойдет не только для сайта на wordpress, но и для других админок где открыта настройка размеров медиафайлов. Мне кажется, большинство ошибок происходит из-за того, что Google сообщает о неправильном расположении интерактивных элементов сайта. Вебмастера сосредотачиваются именно на решение этого вопроса, теряя на нее много времени, однако данная проблемы второстепенна – она вытекает именно из-за более широкого контента.
Контент шире экрана – вот первоначальная причина того, что к странице сайта появляется претензия у Google. Если сайт оптимизирован под мобильные устройства, то претензии появляются именно к конкретным страницам, а не всему вебресурсу. Для того, чтобы устранить данную причину, необходимо проверит все отображаемые элементы на странице. Как правило, Google имеет претензии к изображениям, которые шире 600 пикселей (к сожалению, я не нашел точных параметров в мануале Google). Первое, что Вам необходимо сделать – это изменить размер медиафайлов до 500 пикселей (такой размер я использую для своих сайтов).
Сообщение о том, что Ваш контент шире экрана
Вторая причина возникновения проблемы контент шире экрана – ширина графических элементов превышает установленные гуглом размеры для мобильных устройств. Это могут быть слайдеры, шапка сайта или фоновые изображения. Именно проблема широкой шапки (несмотря на адаптивный дизайн) была причиной неоптимизации под мобильные устройства по параметрам Google на одном из моих сайтов. После замены шапки, сайт стал полностью оптимизированным для мобильных устройств.
Как оптимизировать сайт для мобильных устройств в Google
Для того, чтобы оптимизировать сайт под мобильные устройства и устранить проблему широкого контента необходимо провести действия по следующему алгоритму:
После проведения этих нехитрых действий можно проверять страницу в инструменте оптимизации под мобильные устройства. Как можно увидеть, изменение интерактивных элементов может потребоваться лишь в редких случаях. Надеюсь, моя статья была полезна для Вас, и Вы смогли решить проблему контент шире экрана. Если в ходе решения у Вас появились дополнительные проблемы, обязательно пишите о них в комментариях, постараемся разобраться.
Как адаптировать сайт под разные разрешения
Рассказываем и показываем, как создавать удобные сайты, которые будут хорошо выглядеть на разных мониторах.
Многие разработчики слишком ленивы, чтобы хоть как-то адаптировать свой сайт: одни проверяют всё только под свой браузер, а другие игнорируют мобильные устройства.
Но чаще всего можно заметить, что сайты плохо адаптированы под разные мониторы и разрешения. Например, вот как выглядит «ВКонтакте» на FullHD-мониторе:
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Шрифт очень маленький, а контент размещается только на небольшой части экрана. Чтобы комфортно пользоваться им, нужно менять масштаб страницы:
Встроенных настроек для этого нет, в отличие, например, от Telegram:
Такая адаптация — что-то вроде кибертолерантности. Мы должны заботиться об удобстве посетителей наших сайтов, какими бы устройствами, мониторами и браузерами (только не Internet Explorer) они ни пользовались. Поэтому в этой статье мы расскажем, как адаптировать сайт под разные разрешения.
Создаём адаптивные стили
Прежде всего нужно быть уверенным, что ваш сайт не сломается, если пользователь изменит разрешение на 1 пиксель (как это бывает в MS Word). Для этого везде, где только можно, размеры нужно указывать в процентах.
Также при создании сайта полезно помещать его в оболочку (wrapper): она растягивается на весь экран, а сам сайт будет масштабироваться относительно оболочки.
Сам контент, не считая хэдера и футера, не стоит растягивать на всю страницу:
Тут ширина блока с текстом составляет 80% страницы. Если бы не это ограничение, чтение мелкого шрифта с больших мониторов превратилось бы в разминку шеи:
Также вы можете указать максимальную ширину в пикселях:
Тогда при любом размере монитора читать будет более-менее комфортно.
Создаём стили под отдельные разрешения
Как и в случае с тёмной темой, можно подготовить несколько файлов стилей, каждый из которых будет содержать разные размеры для элементов страницы. Начнём со стиля для средних мониторов — normal.css:
Кроме него будут созданы ещё два файла: small.css и big.css. Они добавляются с помощью отдельного элемента link:
Теперь нужно сделать так, чтобы пользователь мог выбрать, какой масштаб ему подходит. Для этого добавляем кнопки:
И остаётся только подключить скрипт, который будет переключать файл стилей:
Кроме переключения стиля, скрипт ещё и сохраняет выбор пользователя в его браузере, чтобы при повторной загрузке страницы подключался именно этот файл. Для этого используется следующий PHP-код:
Можно посмотреть, как это будет выглядеть:
Автоматическое масштабирование
С помощью JavaScript мы можем проверить размер окна браузера пользователя и подключить тот файл стилей, который лучше подойдёт для страницы такого размера. Вот пример такого кода:
В результате страница будет масштабироваться автоматически.
Как изменить размер окна браузера: инструкция
Автор: Юрий Белоусов · 07.01.2019
Каждый современный браузер имеет ряд гибких настроек и полезных функций, которые позволяют пользоваться браузером с комфортом. Одна из таких настроек, введенная очень и очень давно – возможность изменить размер окна браузера. Можно сделать окно браузера на весь экран, а можно сделать браузер в окне, занимающем лишь определенную часть экрана. Масштаб окна можно легко изменять: увеличивать и уменьшать по необходимости.
О ток, как работать с размерами окон, их видом и пойдет речь в этой статье, а также рассмотрим некоторые проблемы, с которыми иногда могут столкнуться начинающие пользователи ПК.
Стоит отметить, что данная инструкция универсальная и подходит абсолютно для всех браузеров. Изменить размер окна описанным в статье способом можно в Google Chrome, Opera, Яндекс браузере, Mozilla Firefox, Internet Explorer и других веб-обозревателях.
Как сделать окно браузера на весь экран
Если вы столкнулись с ситуацией, когда браузер отображается в небольшом окошке, т.е. его размер развернут не на весь экран, а занимаешь лишь неполную часть рабочего стола, при этом это окно может перемещаться по рабочему столу и масштабироваться, то чтобы сделать окно браузера на весь экран нужно:
После нажатия кнопки «Развернуть» окно браузера снова станет занимать весь полный рабочий экран.
Еще один способ открыть окно браузера на весь экран:
Как сделать браузер на полный экран (полноэкранный режим)
Есть еще один способ сделать браузер на весь экран — включить полноэкранный режим. В отличие от способов, описанных выше, окно браузера будет действительно развернуто на весь экран, скрывая даже панель задач Windows.
F11 — клавиша для отображения окна браузера на весь экран.
Достаточно ее нажать и вся рабочая область будет занята окном браузера.
Чтобы отключить полноэкранный режим нужно повторно нажать клавишу F11 на клавиатуре.
Как сделать браузер в окне
Чтобы сделать отображение браузера в окне следует:
Второй способ, позволяющий отобразить браузер в окне:
Как изменить размер окна браузера: уменьшить или увеличить
Мы разобрались с тем, что можно сделать отображение браузера в окне. Но можно еще и менять размер окна браузера: уменьшить или увеличить, сделать его величину такой, чтобы было удобно.
Чтобы изменить размер окна браузера нужно:
Выделить можно как одну из 4 сторон и изменять лишь ее, так и угол, чтобы изменять размер сразу 2-х сопряженных сторон.
Собственно, ничего сложно, все те же стандартных действия что и при изменении размера окон Windows.
Как сделать браузер на пол экрана
Рассмотрим еще одну фишку, позволяющую разместить окно так, чтобы оно занимало ровно половину экрана.
Чтобы сделать браузер на пол экрана нужно:
С помощью этого способа можно открыть 2 окна браузера, разделив экран пополам и выполнять работу в обоих окнах параллельно.
Можно также переместить окно в самый угол, тогда оно будет занимать ¼ область экрана.
Ну вот мы рассмотрели основные свойства, возможности и настройки размера окна браузера. Теперь вы знаете, как свернуть браузер в окно или растянуть на весь экран, как уменьшить или увеличить окно браузера, изменяя его длину и ширину.
А теперь перейдем к возможным проблемам.
Как убрать браузер во все окно, если нет кнопки «Свернуть»
Одна из ситуаций, с которыми могут столкнуться пользователи – развертывание браузера на весь экран. При этом нет ни крестика, чтобы закрыть браузер, ни – кнопки свернуть. Даже панель задач не видна.
В таком случае, чтобы убрать браузер во все полное окно экрана нужно воспользоваться заветной кнопкой F11, уже описанной в этой статье. При ее нажатии окошко станет стандартного размера.
Если не помогло, то следует нажать Esc (Escape) на клавиатуре.
Браузер за пределами экрана – что делать
Что делать, если браузер вылез за пределы и занимает область больше экрана, окно при этом не уменьшается, так как кнопки «Закрыть» и «Свернуть» не видны?
Если ушло окно браузера за экран, то аналогично описанному выше способу, решаем проблему с помощью нажатия кнопкок F11 и Esc.
Почему браузер открывается не на весь экран
Если каждый раз после запуска браузер открывается не на весь экран и его приходится разворачивать вручную, то основной причиной, почему такое происходит является неисправность работы браузера, либо каких-либо компонентов Windows. Для решения данной проблемы лучше всего переустановить веб-обозреватель и сделать откат системы – вернуть ее в предыдущее состояние, когда проблема не наблюдалась.
Не нашли ответ? Тогда воспользуйтесь формой поиска:
Оптимизация веб-сайтов под большие экраны
Дата публикации: 2016-06-02
От автора: в этой статье автор покажет, как адаптивный дизайн может работать на экранах любого размера, главное правильно все распланировать. Для работы с большими экранами понадобится пара дополнительных медиа запросов, а также вы узнаете, что в веб-шрифтах куда больше потенциала, чем вы думали.
Увеличение количества экранов с ультра высоким разрешением и числа устройств с технологией smart TV привели к тому, что пользователи все чаще заходят на сайты с поистине огромных экранов. Большая часть веб-сайтов не оптимизирована под такие размеры. Но если вы создаете адаптивный сайт, то в нем уже заложены технологии масштабирования, которые нам сегодня понадобятся. В этой статье мы рассмотрим основные сложности и подходы к оптимизации веб-сайтов на больших экранах.
Как определить экран большого размера
Первое, что необходимо сделать, это определиться с тем, какие размеры подпадают под определение «большие». По данным сайта W3Counter самое распространенное разрешение устройств — 1366×768 пикселей. Следующее за ним — 1920×1080. Оба значения относятся в первую очередь к компьютерным мониторам, и большинство веб-сайтов без проблем адаптируются под эти размеры.
Поднимаясь дальше, следующее распространенное разрешение – 2560 пикселей в ширину. Эта ширина соответствует большинству HD мониторов от 27 дюймов. От этой точки у большинства сайтов начинаются проблемы из-за переизбытка свободного пространства.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Небольшая выборка популярных веб-сайтов, открытых на экране с разрешением 2560×1600 пикселей
К примеру, на изображении выше показана выборка из нескольких популярных веб-сайтов, скриншоты были сняты с экранов с разрешением 2560×1600 пикселей. Сразу заметно, что ни один из сайтов не оптимизирован под такое разрешение: текст слишком мелкий, контент зажат в маленьком пространстве так, что сложно сосредоточиться. Из-за большого пустого пространства вокруг макета, все кажется слишком мелким. Все это влияет на разборчивость и на пользовательский опыт.
Так что же мешает дизайнерам и разработчикам оптимизировать сайты под большие экраны? Ответ на этот вопрос целиком зависит от команды разработчиков. У такого разрешения есть несколько технических проблем. Давайте разберем эти проблемы.
Проблемы больших дисплеев
Основная проблема оптимизации больших дисплеев лежит в области масштабирования и управления контентом. Если разбить проблемы на две категории, то основные проблемы это:
Хореография контента
Хореография контента – это то, как контент пропорционально адаптируется к размеру экрана, обеспечивая наилучшее расположение при любой ширине. Чем больше экран, тем менее пропорциональным будет выглядеть контент. Проблема связана с несколькими причинами: 1) нагромождение, которое начинает отвлекать внимание, 2) слишком много пустого пространства вокруг сайта делает контент слишком мелким, 3) из-за того, что все маленькое страдает читаемость.
В общем-то, принцип адаптации контента под маленькие экраны простой: контент расставляется в одну колонку и по необходимости частично меняется дизайн. Но вот для больших экранов принцип радикально отличается и зависит от контента и доступного пространства. Если не адаптировать контент на больших экранах под чрезмерное свободное пространство, контент будет казаться слишком мелким по сравнению с окружением. Но если заполнить пустое пространство с помощью дополнительных колонок, вы рискуете перегрузить пользователя контентом, его будет слишком много.
Изображения
С изображениями на больших экранах связан ряд уникальных задач. Так как большинство больших экранов также имеют большое разрешение, нам придется создать дополнительные версии всех изображений. Кроме того, нам придется следить за тем, как изображения ведут себя внутри макета. Изображения, не увеличивающиеся с экраном, будут оставлять пустое пространство между элементами, а слишком большие изображения будут отнимать пространство у других элементов, перегружая пользователя. Так как идеального решения под все размеры нет, вы должны аккуратно подходить к изображениям и исходить из нужд контента.
Техники оптимизации
Мы определили проблемы, которые появляются при работе с большими дисплеями, теперь давайте разберем несколько способов оптимизации нашего контента под такой масштаб.
Для демонстрации способов оптимизации я создал сайт. Учитывая заголовок статьи, я выбрал соответствующую тематику – Звезду Смерти 2. Дальше я буду показывать куски кода из демо, весь же код можно посмотреть в демо на CodePen.
Способ оптимизации контента под большие дисплеи зависит от самого контента. Можно просто изменять макет, извлекать преимущества из большого свободного пространства и отображать контент. А можно адаптивно увеличивать контент, чтобы он занимал пропорциональное пространство. Ну и можно совмещать оба варианта. В нашем демо мы будем адаптивно масштабировать контент, предоставляя пользователям наилучший опыт серфинга сайтов на больших экранах.
Планирование
Первый этап по оптимизации сайта под большой экран заключается в планировании. Планируя все наперед, вы сведете к минимуму все возможные сюрпризы и будете уверены, что все будет работать как надо. У вас не будет неожиданных проблем, которые будет сложно решить, когда разработка уже будет в самом разгаре. Если вы визуализируете макет и поведение контента в графическом редакторе, то создайте подходящие холсты под большие экраны и стандартные разрешения. Если же вы любите создавать дизайны в браузере, тогда зарисуйте свои идеи того, как контент будет вести себя на больших экранах.
Для нашего демо я сделал зарисовку макета и контента и понял, как разбить сайт на секции, а также как структурировать веб-страницу под эти секции. Потом я набросал дизайн в Sketch, который помог мне определиться со шрифтами, цветом и пропорциями. Главное здесь не вдаваться в детали и не заботиться об идеально выверенных значениях в пикселях – все самое важное, интерактивность, масштабируемость и даже размер шрифта должно решаться уже в браузере.
Изначальная зарисовка и наброски дизайна Звезды Смерти 2
Работа с относительными единицами измерения
Относительные единицы измерения, такие как проценты, EM и REM играют первостепенную роль в адаптивных сайтах, так как с их помощью можно заложить гибкое основание. Используя относительные единицы измерения, мы сохраним пропорции вне зависимости от размера шрифта, выбранного пользователем. Относительные единицы измерения являются полной противоположностью точным значениям в пикселях, не увеличивающимся в соответствии с настройками пользователя. Это приводит к потере пропорций в случае, если пользователь захочет увеличить или уменьшить размер шрифта.
Отзывчивый веб-дизайн и учёт высоты окна браузера
Знаю, что у многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый веб-дизайн» и «высота окна браузера»? Пожалуй, этот заголовок кажется необычным из-за того, что под «отзывчивым дизайном», как правило, понимают проектирование страниц таким образом, чтобы они подстраивались бы под ширину области просмотра, чтобы они хорошо бы выглядели на разных устройствах. Сайты всегда тестируют, уменьшая ширину браузера и наблюдая за происходящим. Но я практически никогда не сталкивался с некими указаниями по тестированию какого-то проекта, в которых сказано, что страницы исследуют путём уменьшения высоты окна браузера. Возможно, вы когда-нибудь ловили себя на такой мысли: «Надо ли проверять страницы в окнах браузера разной высоты?». Я полагаю, что делать это надо, и собираюсь убедить в этом всех, кто прочитает эту статью.
При работе над веб-сайтом не очень правильно делать некие предположения, не опираясь на реальные данные. Поэтому очень важно брать на себя ответственность по проверке сайтов в окнах браузеров разной ширины и разной высоты.
Зачем проверять страницы в окнах браузеров разной высоты?
Хороший вопрос. Прежде чем переходить к примерам и к сценариям использования таких проверок, мне хотелось бы рассказать о проблемах, которые случаются с сайтами, не приспособленными к работе в областях просмотра разной высоты. Это поможет вам лучше понять то, о чём речь пойдёт дальше.
Неправильные предположения о том, как будут пользоваться сайтом, — это один из важнейших факторов, негативно влияющих на работу веб-дизайнера. Например, неправильно будет рассчитывать на то, что сайтом будут пользоваться, разворачивая браузер на весь экран. Вместо этого нужно рассчитывать на худшее.
Предположения и реальность
Выше приведена иллюстрация моих слов. В реальности далеко не все пользователи работают с браузерами так, как предполагает дизайнер. Я сам сталкивался с сайтами, которые плохо выглядели в окнах браузеров уменьшенной высоты.
Инструменты разработчика браузера
Изменение размеров браузера по вертикали — это не единственный способ воздействия на высоту области просмотра. Так, например, когда открывают панель инструментов разработчика, она тоже отнимает часть вертикального пространства.
Панель инструментов разработчика занимает часть окна браузера
Открытие инструментов разработчика может «поломать» дизайн сайта или пролить свет на проблемы, возможность появления которых никто не ожидал. Выделенная область рисунка представляет текущую высоту области просмотра. Если открыть инструменты разработчика, просматривая сайт на маленьком экране ноутбука, это приведёт к тому, что видимой окажется лишь небольшая область страницы.
Подумаем над одним важным вопросом: «Можно ли улучшить впечатления пользователя от работы с сайтом в то время, когда его просматривают в окне браузера небольшой высоты?». Я могу дать положительный ответ на этот вопрос. Полагаю, теории нам хватит. Давайте учиться «вертикальному» подходу к стилизации страниц.
«Вертикальный» CSS
Некоторые дизайнеры и разработчики уделяют основное внимание внешнему виду страницы, который она принимает в окнах разной ширины. При этом они отодвигают на второй план исследование поведения страницы в окнах разной высоты. А это — очень важно. Например, некто работает над дизайном страницы и ему дали инструкции относительно того, как некий компонент должен выглядеть в окнах браузера разной ширины. А как насчёт окон разной высоты?
На большом телефоне навигационные элементы заполняют доступное вертикальное пространство. На телефоне среднего размера уменьшается размер шрифта и расстояние между элементами. На маленьком телефоне вертикального пространства недостаточно для вывода всех элементов. Поэтому они размещаются в 2 колонки.
На этом рисунке показано навигационное меню, внешний вид которого подстраивается под высоту области просмотра. Цель дизайнера заключается в том, чтобы меню заполнило бы всё доступное ему пространство. На небольших экранах уменьшается размер шрифта и расстояние между элементами меню. Если же экран телефона совсем мал (например, как у iPhone 5), элементы выводятся в двух колонках. Подобные сценарии использования сайтов часто упускают из виду. В результате сайты или совсем не приспосабливают к работе на экранах разной высоты, или оптимизируют их лишь тогда, когда какой-нибудь посетитель сайта сообщит о проблеме.
В деле подстройки сайта под области просмотра разной высоты нам может помочь CSS. А именно, речь идёт о двух основных техниках:
Медиазапросы, учитывающие высоту области просмотра
Как вы, наверняка, уже знаете, в CSS можно использовать медиазапросы, учитывающие ширину области просмотра:
А вот медиазапросы, учитывающие высоту окон браузеров, используются гораздо реже:
Единицы измерения, имеющие отношение к области просмотра
Использование единиц измерения, имеющих отношение к размерам области просмотра, может помочь в деле улучшения впечатлений пользователей от работы с сайтами. Например, с учётом высоты области просмотра можно регулировать расстояние между элементами по вертикали.
Чем выше окно браузера — тем больше расстояние между элементами
Если вам эта тема интересна — взгляните на мои статьи о единицах измерения, зависящих от размеров области просмотра страницы и о CSS-функциях.
Ниже мы поговорим о различных способах использования «вертикальных» медиазапросов.
Примеры и сценарии
▍Элементы страниц, накладывающиеся друг на друга при изменении высоты окна браузера
Верхняя часть страницы высотой 100vh
Выглядит всё это очень хорошо, но лишь до тех пор, пока не уменьшится высота окна браузера. Высоты верхней части страницы не хватит для того чтобы вместить иллюстрацию и текст. В результате элементы верхней части страницы перекроют содержимое других её разделов.
Уменьшение высоты окна браузера «ломает» дизайн
Обратите внимание на то, как изображения накладываются на раздел страницы, расположенный под её верхней частью. Происходит это из-за того, что им не хватает места. Взглянем на код к этому примеру.
Рассмотрим несколько вариантов решения подобных проблем:
Итак, мы решили, что «вертикальные» медиазапросы — это стабильный и полезный механизм. Но использование значения 100vh — дело рискованное, так как, если даже можно ограничить размеры изображения, может случиться так, что размеры текста ограничить не получится. Например, если текст в верхнем разделе страницы окажется длиннее, то мы столкнёмся с новым вариантом уже знакомой нам проблемы.
Текст перекрывает раздел сайта, в котором его быть не должно
▍Фиксированный заголовок страницы
Нет ничего плохого в том, чтобы заголовок страницы оставался бы на одном месте при её прокрутке. Но нужно сделать так, чтобы этот заголовок имел бы фиксированную позицию только в том случае, если на экране достаточно вертикального пространства.
Фиксированный заголовок страницы
Тут показан сайт, который просматривают в ландшафтном режиме. Обратите внимание на то, что заголовок занимает слишком много вертикального пространства. Важно ли это для пользователя? В большинстве случаев — нет. Но улучшить ощущения пользователя от работы с сайтом можно, прибегнув к следующему медиазапросу:
При таком подходе в ландшафтном режиме заголовок фиксироваться не будет.
▍Скрытие элементов, которые менее важны, чем другие
Я заметил это в навигационном меню Twitter. А именно, речь идёт о комбинации «вертикальных» медиазапросов и паттерна Priority+.
Выделенные элементы будут скрыты в том случае, если им не хватит места
А вот — мой твит, в котором анализируется применение этого подхода в Twitter.
▍Навигационные элементы и изменение высоты области просмотра
Следующий пример связан с предыдущим. Имеется вертикальная навигационная панель (боковая панель, сайдбар). Если высота области просмотра невелика — можно немного уменьшить вертикальное расстояние между навигационными элементами, что слегка улучшит внешний вид страницы.
Расстояние между элементами и высота области просмотра
Вот стили к этому примеру:
А тут можно посмотреть видео к нему.
Кроме того, можно отметить, что в подобной ситуации модификации можно подвергнуть и размер шрифта, что, при уменьшении высоты окна браузера, даст ещё больше места для элементов.
▍Верхний раздел страницы и высота области просмотра
Верхнему разделу страницы нужно некоторое свободное вертикальное пространство, дающее ему немного «воздуха». Размеры этого пространства могут зависеть от высоты области просмотра.
Чем выше страница — тем больше «воздуха».
Так выглядят стили к этому примеру:
▍Модальные компоненты
Как вы, возможно, уже знаете, от модальных компонентов ожидается, как минимум, горизонтальное выравнивание по центру. Но может понадобиться выровнять подобный элемент и по вертикали. Это возможно, но приводит к неприятностям при изменении объёмов данных, выводимых такими элементами.
Если модальный элемент содержит правильный объём данных, то выглядит он, как показано ниже, очень хорошо.
Правильный модальный элемент
Вот стили для этого элемента:
А вот если в таком же элементе нужно будет вывести больше текста — всё уже будет далеко не так хорошо. А именно, элемент заполнит экран по вертикали и пользователь не сможет прокручивать его содержимое.
Слишком высокий модальный элемент
Эта проблема возникает по следующим причинам:
Модальный элемент, подходящий для вывода длинных текстов
Итоги
Проектируя сайты с учётом тех впечатлений, которые вызовет работа с ними у пользователей, лучше всего строить их дизайн, опираясь на ширину и высоту окна браузера. Может, кому-то покажется странным тестирование страниц в окнах разной высоты, но такое тестирование себя оправдывает. Здесь я рассказал о важности «вертикального» подхода к дизайну сайтов, о том, как проектировать страницы в расчёте на их правильный вывод в областях просмотра разной высоты, рассмотрел примеры. Надеюсь, вам всё это пригодится.
Обращаете ли вы внимание на то, как создаваемые вами веб-страницы выглядят в окнах браузера разной высоты?