Рубрики

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

adaptive-design

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

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

Предпосылки

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

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

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

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

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

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

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

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

<meta name = «viewport» content = «width = device-width, initial-scale = 1»>

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

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

@viewport {
width: device-width;
зум: 1,0;
}

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

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

@ -ms-viewport {
width: device-width;
}

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

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

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

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

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

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

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

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

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

Правила CSS, которые не заключены в @mediaраздел “ », применяются ко всем. А код, заключенный в определенный @mediaраздел " ", будет использоваться только при выполнении условий запроса. Если у вас есть несколько условий, которые должны выполняться одновременно, соедините их с " and", как в приведенных примерах. Вы можете иметь несколько блоков медиазапросов, каждый из которых будет применяться только при соблюдении условий для этого блока.

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

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

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

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

<link rel = «stylesheet» type = «text / css» media = «screen и (max-width: 360px)» href = «Portrait.css»>
<link rel = «stylesheet» type = «text / css» media = «screen and (min-width: 361px) и (max-width: 480px)» href = «landscape.css»>
<link rel = «stylesheet» type = «text / css» media = "screen и (min- ширина: 481 пикселей) «href =» desktop.css ">

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

Тестирование в портретном и альбомном режимах с медиазапросами

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

@ экран мультимедиа и (ориентация: портрет) {
/ * ... * /
}
экран мультимедиа и (ориентация: пейзаж) {
/ * ... * /
}

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

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

Помимо вышесказанного, вы также можете вставить тесты для min-height(т. Е. Минимальная высота), max-height (максимальная высота) widthи height.

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

@media только экран и (максимальная ширина: 480 пикселей) {
/ * ... * /
}

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

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

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

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

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

Разрешения / Ширина экрана мобильного телефона

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

  • 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 в альбомной ориентации)

На thesitewizard.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, хотя я не пробовал ни одну из них и поэтому не могу поручиться за них.
  • Если на вашем сайте очень мало посетителей, использующих такие старые мобильные браузеры, вам нужно решить, хотите ли вы создать решение специально для них. Вы можете обнаружить, что время и усилия, которые вам нужно потратить, несоразмерны количеству людей, которые действительно получают от этого пользу. И это число будет только уменьшаться со временем. Таким образом, вы можете просто позволить таким пользователям просматривать ваш сайт с помощью таблицы стилей по умолчанию (которую все равно увидели бы до того, как вы вдруг решили создать мобильную версию).

Также читают

Понравилась статья? Поделись с другом!!!

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

 ;-)  :|  :x  :twisted:  :smile:  :shock:  :sad:  :roll:  :razz:  :oops:  :o  :lol:  :idea:  :grin:  :evil:  :cry:  :cool:  :???:

двадцать − 19 =