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


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

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

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

Подпишись на рассылку и получи книгу в подарок!

На сегодняшний день иметь адаптивный дизайн – это практически обязанность каждого веб-ресурса, тем более, если он коммерческий, а его главная цель состоит в продаже товаров и услуг. Связано это, прежде всего, с тем, что аудитория мобильных телефонов стремительно растет, а пользователей, совершающих целевые действия с персональных компьютеров, становится все меньше. Согласно статистике от компании Яндекс, покупка товаров и услуг чаще всего происходит с компьютеров, однако просмотр и выбор происходит, как правило, с других устройств. По данным компании Google, более 50% пользователей осуществляют поиск именно со смартфонов.

Что такое мобильная адаптация сайта

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

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

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

Зачем нужна мобильная адаптация сайта

Согласно статистике американской компании comScore, доля мобильного трафика в Соединенных Штатах Америки и странах Европы значительно превышает показатель персональных компьютеров. В России и странах СНГ ситуация сильно отличается: более половины пользователей совершают покупки непосредственно ПК. При этом количество целевого трафика увеличивается. Это значит, что поиск товаров и просмотр основного контента осуществляется со смартфонов.

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

  1. Открыть раздел «Обзор аудитории» и нажать на кнопку «Добавить сегмент».
  2. Отметить галочкой пункт «Трафик с мобильных устройств».

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

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

Что лучше, адаптация под мобильные устройства или полноценная версия для смартфонов

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

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

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

Версия для смартфонов

Это, как правило, отдельная версия сайта, находящаяся на поддомене и дублирующая основную версию и представляющаяся посетителям в урезанном (или сокращенном) виде, относительно ПК. Если разбирать вопрос с точки зрения поисковой оптимизации, то в сравнении с предыдущим вариантом мобильная версия представляет некоторую сложность веб-мастеру: ему приходится использовать огромное количество дополнительных инструментов для автоматической переадресации пользователей с одного URL-адреса на другой. Ведь с точки зрения поисковых машин адрес vebresurs.ru/str и m.vebresurs.ru/str – это разные страницы. Данная версия имеет меньший размер и быстрее загружается, однако ее создание требует большого бюджета.

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

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

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

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

  1. Установка корректных атрибутов полей форм. Прежде всего, в полях ввода данных, будь то имя, никнейм или поисковой запрос, необходимо выключить функцию автоматической корректировки и включить атрибут autocapitalize, который контролирует, как вводится или редактируется пользовательский ввод текста. Если этого не сделать, система автоматизированного ввода будет автоматически заменять вводимые слова. Также необходимо подумать о написании заглавных букв в автоматическом режиме, что избавит человека от необходимости при регистрации или авторизации каждый раз обращаться к клавиатуре.
  2. Установка оптимальной ширины. Чтобы посетители могли видеть публикуемый материал, и он корректно отображался у них в устройстве, следует самостоятельно выявить оптимальное значение ширины и установить его в видимой пользовательской области (viewport) посредством использования дополнительных тегов в заголовках web-страниц. В дальнейшем, когда она будет открываться на планшете или смартфоне, указанные границы отображения контента будут устанавливаться автоматически.
  3. Подбор ширины картинок. После того как на веб-ресурсе была задана конкретная ширина, все картинки будут сильно растягиваться. Для того чтобы исключить подобную проблему, необходимо указать максимальную ширину изображений в сто процентов.
  4. Применение свойства переноса длинных предложений и слов. Часто при адаптации сайта под разные разрешения экрана длинные строки не отображаются полностью (часть вводимого текста размещается за пределами экрана и не видна пользователю). Инструмент указывает системе, нужно ли переносить длинные предложения, не помещающиеся по ширине в заданную областью.
  5. Абсолютное позиционирование в CSS. Если заголовок или закрепленная боковая панель ресурса фиксирована, язык описания внешнего вида документа устанавливает значение относительного позиционирования в фиксированное. В этом случае при увеличении страницы, заголовок или боковая панель будет увеличиваться параллельно, что негативно отразится на восприятии. Для решения проблемы не рекомендуется применять фиксированные позиции.
  6. Публикация качественного и удобочитаемого материала. В частности, необходимо создавать емкие, привлекательные заголовки, разбивать текст на абзацы, использовать нумерованные и маркированные списки, вставлять изображения.

Используя данные инструменты, веб-мастер может провести адаптацию CSS под устройства уже существующего web-ресурса. Благодаря этому посетители будут избавлены от большого количества неудобных моментов при помещении страниц со смартфона или планшета. Если нет времени или возможности заниматься всем самостоятельно, можно воспользоваться услугами специальных сервисов: mobiSiteGalore, MoFuse, bMobilized, Convert Website и т. д.

Что даст адаптация сайта для мобильных устройств

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

  1. Простой и интуитивно понятной навигации по разделам. Как известно, веб-ресурсы на смартфонах характеризуются вертикальной прокруткой, удобной системой внутреннего поиска, кнопками «Домой», «Вверх» и «Назад». Также здесь применяется инструмент обратной связи или указание контактных данных на верхней обложке.
  2. Удобочитаемый материал. Человек не должен прибегать к дополнительному увеличению текста для просмотра, либо мучиться с его границами.
  3. Возможность совершать целевые действия. Важно создать для посетителя удобные условия просмотра страниц, выбора товара, добавления его в корзину, оформления покупки, подписки на email-рассылку и т. д.Помимо этого необходимо предоставить возможность при необходимости перейти к полной версии.

Как проверить адаптацию сайта под мобильные устройства

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

  1. Хорошо читаемый текст, который не нужно увеличивать для просмотра.
  2. Отсутствие прикладных программ и плагинов, увеличивающих размер страницы и мешающие ее просмотру с телефона.
  3. Отсутствие необходимости прокручивать страницу горизонтально.
  4. Быстрая загрузка контента и удобная навигация по разделам.

Это лишь часть признаков. Чтобы тщательно проверить адаптацию сайта под мобильные устройства, можно воспользоваться специальными онлайн-сервисами: Google Mobile Friendly, Яндекс.Вебмастер, средство проверки адаптации Bing, I love adaptive и т. д. Все что для этого нужно сделать – зайти на онлайн-сервис и ввести в специальное поле.

html - Сделать логотип моего веб-сайта адаптировать к разным разрешениям

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

css - Адаптация html сайта

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

Как адаптировать Canvas для разных разрешений телефона? Unity3d

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

Адаптивный дизайн в CSS (thesitewizard.com)

Использование медиа-запросов и области просмотра для мобильного дизайна


Кристофер Хенг, thesitewizard.com

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

Предварительные требования

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

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

Адаптивный веб-дизайн

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

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

Преодоление настроек мобильного устройства по умолчанию: окно просмотра

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

Браузеры современных мобильных телефонов написаны с учетом того, что веб-сайты традиционно предназначены для компьютеров. мониторы. Таким образом, он адаптируется, делая вид, что на веб-сайте есть экран размером с компьютер, и масштабирует все, чтобы оно соответствовало. в этом.Например, Safari на iPhone 5 делает вид, что у него по умолчанию ширина экрана 980 пикселей, хотя реальный размер - 320 пикселей (в портретном режиме). Итак, если вы разрабатываете веб-сайт с фиксированной шириной (скажем) 730 пикселей, вся его ширина уместится на экране вашего мобильного телефона, даже если последний не такой широкий. Браузер выполняет это за счет уменьшения размера вашего веб-сайта, чтобы все стало очень маленьким. Если пользователю нужно что-то прочитать, им придется увеличивать соответствующие части.Вы можете увидеть этот эффект, перейдя в Демонстрационная страница фиксированной ширины на вашем смартфоне. Эта конкретная страница имеет фиксированную ширину 730 пикселей и специально разработана так, чтобы не адаптироваться к вашему использование мобильного телефона.

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

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

Если вы хотите быть ориентированными на будущее, вам теоретически необходимо добавить эквивалентный код CSS в свою таблицу стилей.

@viewport {
ширина: ширина устройства;
зум: 1,0;
}

Вышеупомянутый метод санкционирован в предлагаемых стандартах CSS (т. Е. Фактически еще не ратифицирован).Поскольку такие вещи, как ширина и способ представления веб-страницы, на самом деле являются правилами стиля, они по праву принадлежат таблица стилей вместо метатега в HTML. К сожалению, в то время, когда я писал это, на самом деле ни один веб-браузер реализует его прямо из коробки. Microsoft и Google имеют в своих браузерах экспериментальный код, который его поддерживает, но он должен быть явно включен конечным пользователем.

Если вы хотите протестировать его в Internet Explorer 10, 11 и Microsoft Edge, потому что вы включили средство в свои предпочтения, вы также должны добавить следующее.(Свойство масштабирования еще не реализовано.)

@ -ms-viewport {
ширина: ширина устройства;
}

Префикс « -something- » (например, « -ms- » для Microsoft, « -webkit- » для Google, " -moz- " для Mozilla и т. Д.) - это метод, используемый поставщиками браузеров для добавления поддержки экспериментальных вещей, которые пока официально не добавлены в стандарты. Они делают это потому, что если они добавят, скажем, @viewport преждевременно, с использованием метода предварительных стандартов, который все еще обсуждается и обсуждается, и окончательный стандарт в конечном итоге заканчивается различное значение для этих свойств, то веб-сайты, которые зависят от предварительного стандарта написания @viewport сломает.Это приводит к нечестивому беспорядку, когда производители браузеров должны решать, как интерпретировать правила на веб-сайте. поскольку некоторые сайты будут полагаться на предстандартную семантику, а другие - на официальную. И веб-мастера не будут могут решить проблему, кодируя вещи так или иначе, поскольку они не могут контролировать, посетители используют браузер до или после стандартов. Поэтому решение состоит в том, чтобы предложить версию с префиксом, и включить только тот, без префикса, когда стандарты будут установлены.

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

Ключ, который открывает адаптивный дизайн в CSS: медиа-запросы

Теперь, когда у нас есть браузер мобильного телефона, чтобы воздерживаться от изменения размеров вещей за нашей спиной, мы должны адаптироваться к его маленький экран вручную.Хотя это кажется шагом назад, на самом деле это позволяет нам более подходящим способом, чем автоматическое устройство телефона: например, мы можем изменить размер вещей, которые могут быть измененный размер (например, изображения), оставляя в покое другие, размер которых не должен изменяться (например, слова). Чтобы освободить для этого место, мы можем отправить элементы, которые не так важны, в нижнюю часть экрана. Например, если вы прочитаете какой-нибудь в статье на сайте thesitewizard.com, включая эту, на мобильном телефоне, вы обнаружите, что мое меню навигации (т. е. список кнопок), который обычно находится в левом столбце в браузере рабочего стола, располагается внизу страницы. на смартфоне.Я решил, что, поскольку пользователь находится на этой странице, его основная цель - прочитать статья. Поэтому я помещаю статью вверху, чтобы посетители могли сразу к ней перейти.

Чтобы совершить подобную магию, нам нужен способ определения размера экрана. Современные браузеры предоставляют эту возможность в виде «медиа-запроса».

Медиа-запрос в таблице стилей выглядит примерно так:

@media screen и (max-width: 320px) {
/ * CSS для экранов размером 320 пикселей или меньше будут помещены в этот раздел * /
}

Любой CSS, заключенный в фигурные скобки теста « @media screen и (max-width: 320px) », будет применимо только к экранам с максимальной шириной 320 пикселей.Вы, конечно, не ограничены тестированием шириной 320 пикселей. Последнее - просто фигура, которую я выбрал для этого примера. Вы можете протестировать min-width и max-width любого размера. Вы даже можете проверить диапазон размеров, например, в следующем коде.

@media screen и (min-width: 320px) и (max-width: 640px) {
/ * для экранов шириной не менее 320 пикселей, но не более 640 пикселей * /
}

Правила CSS, не заключенные в раздел « @media », применяются ко всем.И код, который прилагается в конкретном разделе « @media » будет использоваться только при выполнении условий запроса. Если у вас есть несколько условий, которые должны выполняться одновременно, соедините их с « и », как в приведенных примерах. У вас может быть несколько блоков медиа-запросов, каждый из которых будет применяться только при выполнении условий для этого блока.

/ * код, который здесь, до первого блока @media, будет применяться к любому размеру экрана * /
#somethingorother {
ширина: 800 пикселей;
}

@media screen и (max-width: 320px) {
/ * вступает в силу для экранов, размер которых меньше или равен 320 пикселей * /
#somethingorother {
width: 120px;
}
}
@media screen и (min-width: 321px) и (max-width: 480px) {
/ * вступает в силу для экранов от 321 до 480 пикселей (включительно) * /
#somethingorother {
width: 320 пикселей;
}
}
@media screen и (min-width: 481px) {
/ * вступает в силу для экранов размером не менее 481 пикселя * /
#somethingorother {
width: 480px;
}
}

/ * приведенный здесь код будет применяться к любому размеру экрана * /

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

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



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

Тестирование портретного и ландшафтного режима с медиа-запросами

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

экран @media и (ориентация: книжная) {
/ * ... * /
}
экран @media и (ориентация: альбомная) {
/ * ... * /
}

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

Другие полезные функции в медиа-запросах

Помимо вышеуказанного, вы также можете вставить тесты для минимальной высоты (то есть минимальной высоты), максимальной высоты (максимальная высота), ширина и высота .

Кроме того, вы можете начать медиа-запрос с « только », как показано в следующем фрагменте:

Только экран @media и (max-width: 480 пикселей) {
/ *... * /
}

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

Если вы хотите использовать CSS для всех ситуаций, кроме случаев, когда выполняются определенные условия, вы можете использовать « not » перед вашим условием, как в следующем примере.

@media not (max-width: 639px) {
/ * Правила CSS для любого устройства, ширина которого превышает 639 пикселей * /
}

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

Однако будьте осторожны, «not» обрабатывается как «только» в очень старых браузерах.То есть он будет интерпретироваться как тип устройства и поэтому стили в следующем блоке применяться не будут.

Разрешение / ширина экрана мобильного устройства

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

  • 240 пикселей (старый портретный режим Android)
  • 320 пикселей (iPhone 3-5 и iPhone SE в портретном режиме)
  • 375 пикселей (iPhone 6, 6s, 7, 8 и X портрет)
  • 384 пикселя (Android Nexus портрет)
  • 414 пикселей (iPhone 6 Plus, 6s Plus, 7 Plus и 8 Plus, портретная ориентация)
  • 480 пикселей (iPhone 3 и 4 альбомный режим)
  • 568 пикселей (iPhone 5 и iPhone SE в горизонтальной ориентации)
  • 600 пикселей (Android Nexus в альбомной ориентации, Kindle в портретной ориентации)
  • 667 пикселей (iPhone 6, 7 и 8, альбомная ориентация)
  • 736 пикселей (iPhone 6 Plus, 7 Plus и 8 Plus в альбомной ориентации)
  • 768 пикселей (iPad портрет)
  • 812 пикселей (iPhone X, альбомная ориентация)
  • 1024 пикселей (iPad, альбомная ориентация)

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

Обратите внимание, что вам не обязательно следовать моей системе разделения CSS на 629 пикселей.Это просто цифра, которую я использовал потому что, похоже, он отлично работает с контентом thesitewizard.com. На самом деле, если я правильно помню, я видел сайт, переключился на мобильный макет только на 480 пикселей, а другой переключился на разные макеты в зависимости от того, Экран имел 940, 640 или 520 пикселей по горизонтальной оси. Я рекомендую вам не слепо следить за размером других сайтов условия: используйте номер, соответствующий вашему содержанию, протестируйте и измените его соответствующим образом.

Совместимость с веб-браузерами

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

Что касается смартфонов, насколько мне известно, медиа-запросы поддерживаются только в браузерах Android, начиная с с версией 2.1, на iPhone Safari 3.2 и новее, Blackberry 7 и новее, Opera Mobile 12 и новее, Opera Mini 8, и Internet Explorer («IE») для мобильных устройств 10 и более поздних версий.

Что касается браузеров для настольных ПК / ноутбуков, поддержка, похоже, началась с IE 9, Firefox 3.5, Safari 4 и Chrome 4. Поскольку Microsoft Edge изначально был основан на коде IE 11, он всегда имел поддержку медиа-запросов.

Учитывая вышесказанное, насколько безопасно использовать медиа-запросы на вашем сайте?

  • Многое зависит от демографии вашего сайта. Например, если на вашем сайте много люди, использующие телефоны с IE mobile 9 и более ранними версиями, вероятно, захотят поддержать их.

    Это не невозможно, поскольку ранние версии IE позволяют использовать условные комментарии, где вы можете включить правила, которые будут отображаться только ими, а не другими браузерами. В качестве таких, эти браузеры можно обнаружить не прибегая к медиа-запросам.

    Кроме того, вы можете использовать JavaScript для определения размера экрана и соответствующей настройки таблицы стилей. В Интернете есть даже бесплатные сценарии JavaScripts, которые реализуют медиа-запросы в ранних версиях IE, хотя я не пробовал ни одного из них и поэтому не могу за них поручиться.

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

Следующая глава

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

Авторские права © 2016-2020 Christopher Heng. Все права защищены.
Получите больше бесплатных советов и подобных статей, по веб-дизайну, продвижению, доходам и написанию сценариев с https://www.thesitewizard.com/.

.

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

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

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

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