Как адаптировать сайт под разные мониторы


Пример оптимизации сайта под разные экраны css мета теги

Пример оптимизации сайта под разные экраны css мета теги Сейчас в нашу жизнь вошло столько устройств, которые позволяют свободно бороздить интернет, что уже не отвечают веениям времени еще недавно преобладающие методы верстки сайтов. Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 1024px. Но посмотрев разрешение экранов посещающих мои сайты в яндекс метрике, был удевлен что 1024px уже не актуален и разнообразие разрешений просто огромное. А трафик с маленьких экранов мобильных устройств состовляет почти 20%. Вот скриншот из яндекс метрики одного из моих сайтов, о котором пойдет речь далее.

Разрешения экранов

Основные разрешения экранов, посещающие сайт, статистика за месяц Получается что на каких-то устройствах сайт отображается очень мелко, на каких-то с горизонтальной прокруткой, а на больших экранах с пустыми полями по бокам и сайт выглядит очень маленьким. Так-же и гугл оповестил что "ваш сайт не оптимизирован для мобильных устройств". Ниже пример как сайт выглядил до оптимизации на разных разрешениях от мобильников 240*320px, до 1920*1200px.

Скриншот сайта на разных экранах

Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px Приступив к оптимизации я первым делом добавил мета тег в body сайта. Сервис гугл для проверки оптимизации сказал что "сайт оптимизирован". Но на самом деле это не так. Данный тег заставляет сайт отображаться пиксель в пиксель, то-есть в зависимости от фактического разрешения экрана, определяет область просмотра. Так например на 320*480px будет отображаться только кусочек сайта, а на больших экранах пустые области.

Для отображения сайта пиксель в пиксель

Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров. В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки.

Верстка сайта под разные экраны

Чтобы адаптировать сайт я добавил в boby сайта вот этот список мета тегов. viewport - заставляет сайт отображаться в соответствии с пикселями устройства. screen and - позволяет назначать CSS стили в зависимости от разрешения экрана. Так например запись Указывает что для экранов с разрешением меньше 640px нужно применить стиль из файла style.css Так-же можно указывать стили в одном файле или распределить по разным css файлам. В css файле стиль для экранов как в данном примере max-width:640px делается так /*для мобильных устройств*/ @media screen and (max-width: 640px) { aside {width:98%;} article {width:98%;} #container {font-size:120%;} #razdeli_opisanie {width:95%;} } @media screen and (max-width: 1024px) { body {font-size:85%;} } @media screen and (min-width: 1280px) { body {font-size: 100%;} . Стили css назначаются с помощью @media screen and (min-width: ХХХpx) @media screen and (max-width: 640px) { ваши стили } Так-же можно указать стили для конкретных экранов, например (width: 480px), но сейчас там много разрешений что смысла нет писать большой css фаил чтобы для каждого конкретного экрана написать свои правила отображения. Я просто сделал резиновую верстку сайта в основных стилях. И если например разрешение экрана меньше (max-width: 640px), то все блоки у меня растягиваются по ширине экрана. А если экран от 640-1024px (max-width: 1024px), то я меняю только шрифт body {font-size: 85%;}, так-как по умолчанию он в браузерах 16px, а я его делаю 14px. Если разрешение (min-width: 1280px), то-есть 1280px и более, то я просто увеличил шрифт до 100%, а сайт в основной верстке расстягивается по ширине экрана.

То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.

Скриншоты сайта е ветерок ру

Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px Надеюсь что вам стало понятно как сделать. Думаю как сделать основную резиновую верстку вы и так знаете. Я к примеру все размеры указал в процентах (%) вместо пикселей (px). И указал дополнительно стили под различные разрешения экранов. Но этот сайт я пока не адаптировал под разные экраны, на момент написания этой статьи размеры сайта указаны 995px и все размеры в px.

html - Проблемы с правильным отображением формата веб-страницы для мониторов разных размеров

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики & te
.

css - Как настроить мою HTML-страницу под любое разрешение

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

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

Мы все работаем в Интернете в основном с помощью мобильных устройств, потому что они очень удобны и легко доступны. Подавляющее большинство пользователей мобильных устройств совершают покупки в Интернете и оплачивают счета за коммунальные услуги с помощью этих устройств. Недавнее исследование Forrester под названием «Цифровой бизнес-императив» показало, что за трехмесячный период 43% клиентов банковского сектора в США использовали мобильные телефоны для онлайн-банковских операций.

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

Веб-страницы обычно состоят из одного или нескольких из следующих компонентов: верхнего и нижнего колонтитула, основного содержимого (текста), изображений, форм, видео и таблиц. Устройства различаются размером экрана (длина x ширина), разрешением экрана (плотностью пикселей), вычислительной мощностью (ЦП и память) и операционной системой (iOS, Android, Windows и т. Д.). Эти различия существенно влияют на общую производительность и визуализацию веб-компонентов, таких как изображения, видео и текст, на разных устройствах. Еще один важный момент, который следует отметить, это то, что большинство мобильных пользователей не всегда подключены к высокоскоростной сети; следовательно, веб-страницы должны быть тщательно спроектированы, чтобы они также эффективно работали в соединениях с низкой пропускной способностью.

Самые неприятные проблемы с веб-сайтами на мобильных платформах

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

  • Веб-сайты не адаптируются к разным размерам экрана автоматически. Некоторые сайты предназначены для форматирования для экранов переменного размера, но их элементы могут не масштабироваться автоматически. Это приведет к тому, что сайт будет автоматически настраиваться под различные размеры экрана, но элементы внутри могут выглядеть ужасно большими на небольших устройствах.Некоторые сайты могут быть не предназначены для адаптации к изменяемым размерам экрана, в результате чего элементы таких сайтов будут выглядеть очень маленькими на устройствах с меньшими экранами.
  • Веб-сайты, на которых слишком много контента для мобильных устройств. Некоторые веб-сайты загружены слишком большим количеством контента, чтобы заполнить пустое пространство при открытии на рабочем столе. Веб-сайты, разработанные без учета мобильных пользователей, обычно подпадают под эту категорию. Этим сайтам требуется больше времени и пропускной способности для загрузки, и если страницы не предназначены для мобильных устройств, то часть контента может даже не отображаться на устройствах.
  • Сайты, на которых загружаются изображения слишком долго. Веб-сайты со слишком большим количеством изображений или тяжелыми файлами изображений, скорее всего, будут долго загружаться, если изображения не были оптимизированы на этапе проектирования.
  • Данные в таблицах выглядят очень сложными и загружаются слишком долго. Многие веб-сайты представляют данные в виде таблиц (например, сравнение конкурирующих продуктов, тарифов на авиабилеты с разных сайтов бронирования путешествий, расписания рейсов и т. Д.), А на мобильных устройствах эти таблицы выглядят слишком сложными, трудными для понимания и / или загрузка занимает слишком много времени.
  • Веб-сайты, на которых размещены видео, которые не воспроизводятся на некоторых устройствах. Не все видеоформаты поддерживаются всеми мобильными устройствами. Иногда на веб-сайтах размещаются медиафайлы, требующие лицензии, или Adobe Flash и другие специальные проигрыватели, которые могут не поддерживаться некоторыми мобильными устройствами. Это вызывает разочарование у пользователей и плохое впечатление от работы с сайтом.

Создавайте сайты для адаптации к различным устройствам

Все часто встречающиеся проблемы с веб-сайтами на мобильных устройствах можно решить с помощью правильного дизайна, учитывающего эти проблемы.Наиболее рекомендуемой практикой является подход « сначала мобильный, ». При работе с несколькими ограничениями, такими как размер экрана, пропускная способность и т. Д., Необходимость сконцентрироваться на правильном количестве и качестве контента должна иметь высокий приоритет. Подход, ориентированный на мобильные устройства, ставит контент в качестве основного объекта и направлен на создание дизайна для самых маленьких устройств, чтобы гарантировать, что они имеют только самые важные функции. Сначала он решает проблемы дизайна мобильных устройств, а затем упрощает постепенное улучшение дизайна для других более крупных устройств.

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

Адаптация к любому размеру экрана: Как минимум, веб-страницу необходимо масштабировать, чтобы она соответствовала размеру экрана любого мобильного устройства. В настоящее время мобильные устройства имеют очень высокое разрешение экрана. Плотность пикселей на мобильных устройствах намного выше, чем на экранах настольных компьютеров. Поэтому важно отформатировать страницу так, чтобы она соответствовала ширине экрана мобильного устройства в пикселях, не зависящих от устройства.Тег «meta viewport», включенный в документа HTML, отвечает этому требованию.

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

«Контент - король»: Веб-дизайнеры должны помнить, что контент должен определять дизайн их веб-сайтов, а не наоборот. Веб-сайты со слишком большим количеством элементов, таких как таблицы, формы, диаграммы и т. Д., Становятся сложными, когда их нужно масштабировать на мобильных устройствах.Разработчики в конечном итоге скрывают контент для мобильных пользователей, и в результате настольная и мобильная версии веб-сайта становятся несовместимыми. Целью дизайна должно быть сосредоточение внимания на основной структуре и содержании, а не на добавлении декоративных элементов на веб-сайт. В соответствии с рекомендациями методологии, ориентированной на мобильные устройства, дизайнеры должны обеспечить единую версию контента как для настольных, так и для мобильных пользователей. Таким образом, веб-дизайнеры должны тщательно продумывать, создавать и оптимизировать контент, чтобы он не только отвечал бизнес-целям, но и нравился пользователям мобильных устройств.Контент, который не отображается в мобильной версии, может даже не отображаться в версии для ПК.

Адаптивные изображения . При проектировании следует учитывать небольшие портативные устройства, работающие в областях с низким уровнем сигнала. Большие фотографии и сложная графика не подходят для мобильных устройств, работающих в таких условиях. Дизайнеры должны убедиться, что изображения, используемые на веб-сайтах, оптимизированы для разных размеров окон просмотра и плотности пикселей. Рекомендуемый подход - использовать «переключение разрешения», с помощью которого можно указать браузеру выбрать и использовать файл изображения подходящего размера в зависимости от размера экрана устройства.Переключение изображения в соответствии с разрешением осуществляется с помощью двух атрибутов: srcset и sizes. С этими атрибутами (включенными во фрагмент кода, показанный ниже) браузер будет использовать ширину устройства для выбора наиболее подходящего условия мультимедиа, указанного в списке размеров, выбрать размер слота на основе этого условия и загрузить изображение, указанное в srcset, которое точно соответствует выбранному размеру слота.

Например, если устройство с окном просмотра 320 пикселей загружает страницу, условие мультимедиа (максимальная ширина: 320 пикселей) в списке размеров будет истинным, и, следовательно, будет выбран соответствующий слот 280 пикселей.Первое изображение, указанное в srcset (elephant-320w.jpg), имеет ширину, наиболее близкую к ширине этого слота. Браузеры, не поддерживающие переключение разрешения, будут отображать изображение, указанное в атрибуте src, как изображение по умолчанию. Такой подход не только подбирает правильное изображение для области просмотра вашего устройства, но также предотвращает загрузку излишне больших изображений, которые потребляют значительную пропускную способность.

Адаптивные таблицы: Мир становится все более управляемым данными. Передача важных и срочных данных на карманные устройства людей дает конечным пользователям большие возможности и свободу в принятии решений.Задача состоит в том, чтобы представить данные пользователю таким образом, чтобы его было легко загрузить на мобильное устройство и прочитать. Чаще всего данные необходимо представлять в виде таблиц, но когда таблицы данных становятся слишком большими и громоздкими, их трудно интерпретировать на мобильном устройстве с маленьким экраном. Экран может быть намного уже, чем ширина таблицы, вынуждая пользователя уменьшать масштаб только для того, чтобы уместить таблицу на экране, в результате чего текст выглядит очень маленьким. Точно так же экран может быть намного шире, чем ширина таблицы, вынуждая пользователей увеличивать масштаб для просмотра данных, требуя постоянной вертикальной и горизонтальной прокрутки.Существует несколько подходов к созданию адаптивных таблиц, наиболее важные из которых будут упомянуты ниже:

Таблица не будет рассматриваться как таблица, поскольку столбцы будут перенесены в строки. Каждый столбец будет иметь такой же размер, как и экран, чтобы избежать необходимости прокрутки по горизонтали. Используя соответствующую раскраску (1 строка данных), каждую строку данных можно отличить от другой. В этом случае для каждой «ячейки» следует использовать сгенерированный CSS контент (: before) для применения метки, чтобы можно было четко идентифицировать каждый фрагмент данных.

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

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

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

В приведенном ниже примере показано использование

Свойства videoWidth и videoHeight элемента video помогают идентифицировать закодированный размер видео. Размеры видео можно контролировать с помощью JavaScript или CSS. Максимальная ширина: 100 процентов помогает подобрать размер видео по размеру экрана. Медиа-запросы CSS можно использовать для установки размера на основе размеров области просмотра. Также существует несколько библиотек и плагинов JavaScript, которые можно использовать для поддержания соотношения сторон и размера видео.

Все учтено…

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

Подход «сначала мобильные» помогает веб-дизайнерам создавать сайты, которые хорошо работают на небольших мобильных устройствах. Веб-дизайнеры должны быть осторожны при выборе подходящего контента, который удовлетворяет бизнес-требованиям, учитывая технические ограничения устройств, такие как размеры экрана, скорость процессора, память и условия эксплуатации (например,слабый сетевой сигнал). Следует позаботиться о том, чтобы изображения, видео и данные, представленные на мобильных устройствах, были адаптированы. Дизайнеры также должны быть чувствительны к точкам останова, целям касания и т. Д.

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

- Шридхар Асватанараянан

.

c # - Как разработать графический интерфейс для различных разрешений монитора?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий