Как сделать чтобы сайт масштабировался под монитор

Обновлено: 10.01.2025

Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).

Этот метатег вставляют в контейнер head вашего сайта.

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

Для более детальной настройки отображения используем дополнительные значения

Ширина сайта на экранах мобильных устройств

Позволяет адаптировать ширину сайта под ширину экрана устройства

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

А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.

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

Высота сайта на экранах мобильных устройств

В некоторых мобильных браузерах при интерполяции страницы сайта высота сайта отображается не корректно.

Для исправления этой ошибки мы можем использовать правило

Масштабирование сайта на экранах мобильных устройств

С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.

Разрешить масштабирование на смартфоне:

Запретить масштабирование на мобильном телефоне:

Подитог

И так мы создали свой viewport и так же для него создали медиапзапрос

В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)

Viewport:

Медиазапрос:

рис.1 Отображение сайта без метатега viewport

рис.2 Отображение сайта с атрибутом width=device-width

рис.3 Отображение сайта с атрибутом width=600

Верный viewport

Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:

В предыдущей статье я уже писал о том, что такое адаптивный дизайн и зачем он нужен. Но как достичь этой самой адаптивности?

Как сделать адаптивную верстку сайта

Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами <head></head> вставьте следующий код:

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

Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.

Самые важные разрешения экрана, при адаптивной верстке

320 px — Мобильные устройства (портретная ориентация);
480 px — Мобильные устройства (альбомная ориентация);
600 px — Небольшие планшеты;
768 px — Планшеты (портретная ориентация);
1024 px — Планшеты (альбомная ориентация)/Нетбуки;
1280 px и более — PC.

Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.

bootstrap адаптивный дизайн

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.

В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.

Проверка адаптивности сайта

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

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

Увеличение количества экранов с ультра высоким разрешением и числа устройств с технологией smart TV привели к тому, что пользователи все чаще заходят на сайты с поистине огромных экранов. Большая часть веб-сайтов не оптимизирована под такие размеры. Но если вы создаете адаптивный сайт, то в нем уже заложены технологии масштабирования, которые нам сегодня понадобятся. В этой статье мы рассмотрим основные сложности и подходы к оптимизации веб-сайтов на больших экранах.

Как определить экран большого размера

Поднимаясь дальше, следующее распространенное разрешение – 2560 пикселей в ширину. Эта ширина соответствует большинству HD мониторов от 27 дюймов. От этой точки у большинства сайтов начинаются проблемы из-за переизбытка свободного пространства.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Так что же мешает дизайнерам и разработчикам оптимизировать сайты под большие экраны? Ответ на этот вопрос целиком зависит от команды разработчиков. У такого разрешения есть несколько технических проблем. Давайте разберем эти проблемы.

Проблемы больших дисплеев

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

Хореография контента

Хореография контента – это то, как контент пропорционально адаптируется к размеру экрана, обеспечивая наилучшее расположение при любой ширине. Чем больше экран, тем менее пропорциональным будет выглядеть контент. Проблема связана с несколькими причинами: 1) нагромождение, которое начинает отвлекать внимание, 2) слишком много пустого пространства вокруг сайта делает контент слишком мелким, 3) из-за того, что все маленькое страдает читаемость.

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

Изображения

С изображениями на больших экранах связан ряд уникальных задач. Так как большинство больших экранов также имеют большое разрешение, нам придется создать дополнительные версии всех изображений. Кроме того, нам придется следить за тем, как изображения ведут себя внутри макета. Изображения, не увеличивающиеся с экраном, будут оставлять пустое пространство между элементами, а слишком большие изображения будут отнимать пространство у других элементов, перегружая пользователя. Так как идеального решения под все размеры нет, вы должны аккуратно подходить к изображениям и исходить из нужд контента.

Техники оптимизации

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

Для демонстрации способов оптимизации я создал сайт. Учитывая заголовок статьи, я выбрал соответствующую тематику – Звезду Смерти 2. Дальше я буду показывать куски кода из демо, весь же код можно посмотреть в демо на CodePen.

Способ оптимизации контента под большие дисплеи зависит от самого контента. Можно просто изменять макет, извлекать преимущества из большого свободного пространства и отображать контент. А можно адаптивно увеличивать контент, чтобы он занимал пропорциональное пространство. Ну и можно совмещать оба варианта. В нашем демо мы будем адаптивно масштабировать контент, предоставляя пользователям наилучший опыт серфинга сайтов на больших экранах.

Планирование

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

Для нашего демо я сделал зарисовку макета и контента и понял, как разбить сайт на секции, а также как структурировать веб-страницу под эти секции. Потом я набросал дизайн в Sketch, который помог мне определиться со шрифтами, цветом и пропорциями. Главное здесь не вдаваться в детали и не заботиться об идеально выверенных значениях в пикселях – все самое важное, интерактивность, масштабируемость и даже размер шрифта должно решаться уже в браузере.

Изначальная зарисовка и наброски дизайна Звезды Смерти 2

Работа с относительными единицами измерения

Относительные единицы измерения, такие как проценты, EM и REM играют первостепенную роль в адаптивных сайтах, так как с их помощью можно заложить гибкое основание. Используя относительные единицы измерения, мы сохраним пропорции вне зависимости от размера шрифта, выбранного пользователем. Относительные единицы измерения являются полной противоположностью точным значениям в пикселях, не увеличивающимся в соответствии с настройками пользователя. Это приводит к потере пропорций в случае, если пользователь захочет увеличить или уменьшить размер шрифта.

Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в нашем Telegram-канале. Подпишитесь, мне будет очень приятно.

Сегодня я поделюсь с вами одним трюком, с которым я столкнулся, работая с CSS. С его помощью можно динамически масштабировать любой HTML-элемент, а заодно устранить многие причины, по которым раньше приходилось писать медиа-запросы.

Прежде всего, я хотел бы отдать должное Майку Ритмюллеру за то, что он изначально придумал эту функцию, и Джеффу Грэму из CSS-Tricks за расширение её функциональности. Я ни в коем случае не ставлю себе в заслугу создание этой функции. Я только хочу пропеть ей хвалу.

Итак, давайте приступим к применению стилей.

В CSS по умолчанию присутствует возможность применять базовые математические операции с помощью функции calc(). Благодаря ей мы можем решить любое простое математическое уравнение и установить полученный результат в качестве свойства CSS, которому требуется численное значение. calc() может применяться везде: от font-size до width и box-shadow… .

В CSS также есть средство измерения, которое вычисляет viewport height и viewport width окна браузера:vh и vw соответственно. 100vh обозначает всю высоту окна браузера, а 100vw — всю ширину. Разница между 100% и 100vh/100vw в том, что 100% устанавливается относительно селектора, внутри которого происходит определение, в то время как значение 100vh/100vw — абсолютное для окна браузера. Это различие важно.

Объяснив этот момент с calc() и 100vh/100vw, пропущу несколько шагов и перейду прямо к формуле.

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

calc([min size]px + ([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Хорошо… Давайте разбираться.

Во-первых, взглянем на правую часть уравнения:

Нам нужно установить минимальный размер для элемента element, так, чтобы любой element, который мы хотим масштабировать, не был равен 0px. Если мы хотим, чтобы элемент был размером не менее 25px, то можем подставить это значение в первую часть calc():

[min size]px = 25px

Нам важна левая часть:

([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Разберёмся с ней:

([max size] — [min size])

Здесь мы устанавливаем диапазон через минимальный и максимальный размер, который хочется видеть у элемента, и эта разность будет действовать как множитель. Если нужно, чтобы размер элемента находился в пределах между 25px и 50px, мы можем подставить сюда такие значения:

([max size] — [min size]) = (50 - 25)

Третья часть сложнее всего:

((100vw — [min vw width]px) / ([max vw width] — [min vw width]))

Здесь мы можем задать диапазон через минимальное и максимальное ожидаемое разрешение браузера. На десктопе я всегда, исходя из опыта, беру 1920px (горизонтальное разрешение для 1080p) и 500px (самое маленькое разрешение, до которого возможно масштабировать в Chrome без инструментов разработчика).

Подставим эти значения, и крайняя слева часть уравнения примет следующий вид:

((100vw — [min vw width]px) / ([max vw width] — [min vw width])) = ((100vw — 500px) / (1920–500)))

Это создаёт соотношение, основанное на величине значения свойства viewport (окна просмотра) браузера. Всё, что выходит за пределы диапазона между 500px и 1920px, будет масштабироваться вверх или вниз, но с линейной скоростью. Мы также можем написать медиа-запрос для мобильных устройств или сверхшироких мониторов или записать эти исключения в саму функцию calc().

Давайте начнём упрощать: подставим в функцию некоторые числа и посмотрим на неё в действии. Мы можем заменить 100vw любым разрешением, чтобы увидеть соотношение, которое устанавливаем для размера нашего element:

((1920px — 500px) / (1920–500)) = 1 ((1565px — 500px) / (1920–500)) = 0.75 ((1210px — 500px) / (1920–500)) = 0.5 ((855px — 500px) / (1920–500)) = 0.25 ((500px — 500px) / (1920–500)) = 0

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

(50–25) * ((1920px — 500px) / (1920–500)) = 25px (50–25) * ((1565px — 500px) / (1920–500)) = 18.75px (50–25) * ((1210px — 500px) / (1920–500)) = 12.5px (50–25) * ((855px — 500px) / (1920–500)) = 6.25px (50–25) * ((500px — 500px) / (1920–500)) = 0px

Наконец, если мы затем добавим минимальный размер элемента к этому множителю, то получим окончательный размер элемента:

25 + (50–25) * ((1920px — 500px) / (1920–500)) = 50px 25 + (50–25) * ((1565px — 500px) / (1920–500)) = 43.75px 25 + (50–25) * ((1210px — 500px) / (1920–500)) = 37.5px 25 + (50–25) * ((855px — 500px) / (1920–500)) = 31.25px 25 + (50–25) * ((500px — 500px) / (1920–500)) = 25px

Итак, если мы хотим, чтобы элемент был равен 25px, когда ширина браузера равна 500px, и 50px, когда ширина браузера равна 1920px, вся функция будет выглядеть следующим образом:

Читайте также: