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


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

Как выглядит Ваш сайт на мобильных устройствах? Данный сервис поможет Вам быстро составить представление о том, как выглядит Ваш сайт на популярных мобильных устройствах. Конечно, это не симулятор, и в точности оценить настоящий вид можно только используя реальный девайс. Почитайте, что такое адаптивный Веб-дизайн, чтобы понять, как сделать Ваш сайт удобным в использовании с любого мобильного устройства.
Хотите сделать Ваш сайт более "дружным"? Звоните (032) 242-33-39 или просто свяжитесь с нами!

Режим статической ширины

Если Ваш сайт не адаптивный, и имеет статически заданную ширину, используйте режим статической ширины. Для этого добавьте параметр &width=x, где х - ширина Вашего сайта в пикселях. Например: http://www.webmark.com.ua/mobile/?url=webmark.com.ua&width=1024

iPhone вертикально 320 x 480

iPhone горизонтально 480 x 320

Android вертикально 240 x 320

Android горизонтально 320 x 240

Android вертикально (новый) 295 х 515

Android горизонтально (новый) 515 х 295

iPad вертикально 768 x 1024

iPad горизонтально 1024 x 768

Kindle вертикально 600 x 1024

Kindle горизонтально 1024 x 600

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

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


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

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

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

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

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

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

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

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

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

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

Браузеры современных мобильных телефонов написаны с учетом того, что веб-сайты традиционно разрабатывались для компьютеров. мониторы. Таким образом, он приспосабливается, делая вид, что веб-сайт имеет экран размером с компьютер, и масштабирует все, чтобы оно соответствовало. в этом.Например, 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/.

.

css - Отображать контент только на мобильных устройствах

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

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

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

Все учтено…

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

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

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

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

.

Показать и скрыть различный контент на мобильных устройствах и настольных компьютерах

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

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

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

Метод 1: универсальный метод (работает на любой платформе)

Узнайте, как использовать несколько фрагментов CSS для отображения и скрытия содержимого на любом веб-сайте, независимо от того, как он был создан.

Метод 2: Метод строителя бобра

Узнайте, как использовать встроенные настройки адаптивного макета в любом модуле Beaver Builder для отображения и скрытия содержимого.

Метод 3. Метод конструктора веб-сайтов Dynamik

Используя комбинацию CSS и несколько настроек Dynamik Website Builder, вы можете легко отображать и скрывать контент.


Метод 1: Показать и скрыть различный контент на любой платформе

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

Да, этот метод также будет работать на ЛЮБОМ сайте Beaver Builder или Dynamik Website Builder… но следуйте тем методам, которые используют некоторые из встроенных функций этих платформ.

Итак…. вы создали веб-сайт, используя какую-то случайную тему WordPress, Joomla или Drupal и т. д., и вы хотите отображать и скрывать различный контент на мобильных и настольных устройствах! Нет проблем! Для этого нам просто нужно использовать волшебный CSS!

PRO TIP: вам действительно стоит подумать об использовании комбинации WordPress и Beaver Builder!

Шаг 1 - Демо-контент

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


Это контент, который будет отображаться на DESKTOPS.


Это контент, который будет отображаться на МОБИЛЬНЫХ УСТРОЙСТВАХ.

Просто взглянув на это, вы сможете сказать, что верхний блок будет для контента DESKTOP , а нижний блок будет для контента MOBILE . В приведенном выше примере я использую одно простое предложение, но вы можете поместить ВСЕ между двумя открывающими и закрывающими тегами div (например, фотографии, заголовки, видео на YouTube, галереи и т. Д.).

Ваш экран (если вы используете WordPress) должен теперь выглядеть примерно так:

SUPER-DUPER ВАЖНО: Убедитесь, что вы вставляете эту строку в текстовом или кодовом режиме, ИЛИ ЭТО НЕ БУДЕТ РАБОТАТЬ !!!

Шаг 2. Волшебный CSS

Теперь, когда на вашем сайте размещены две части контента, нам понадобится немного магии CSS, чтобы контент для ПК отображался только на рабочих столах, а контент для мобильных устройств - только на мобильных устройствах. Отредактируйте файл CSS своего веб-сайта и вставьте в него следующий CSS.а затем СОХРАНИТЕ ваши изменения.

  • Для всех пользователей WordPress это будет расположено в панели администратора вашей темы или в Внешний вид> Редактор> style.css файл
  • Для всех других платформ ищет любой тип раздела, который касается «Настраиваемых таблиц стилей», «Расширенного CSS» или «Настраиваемых стилей»… каждая платформа отличается.

# content-desktop {display: block;}
# content-mobile {display: none;}

@media screen и (макс. Ширина: 768 пикселей) {

# content-desktop {display: none;}
# content-mobile {display: block;}

}

ВАЖНАЯ ИНФОРМАЦИЯ: не забудьте последний маленький} в конце!

Шаг 3. Проверьте это

Посмотрите свою веб-страницу на рабочем столе, а затем на телефоне.Заметили, как меняется контент?

Вы также можете изменить размер веб-браузера на рабочем столе , чтобы он был более тонким, чтобы увидеть тот же эффект. Проверьте это и узнайте, как отображать и скрывать различный контент:

Вы можете увидеть приведенный выше пример вживую, перейдя ЗДЕСЬ.

Шаг 4. Замена демонстрационного содержимого

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

КАК ЭТО РАБОТАЕТ

Если вам немного интересно, как это работает, вот краткое объяснение:

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

Верхний блок предназначен для всех размеров экрана более 768 пикселей в ширину (также известный как настольные устройства)

Нижний блок предназначен для всех размеров экрана менее 768 пикселей в ширину (также называемых Мобильные устройства)

Desktop: вы увидите, что содержимое рабочего стола имеет значение Display , равное Block на обычных экранах, но на экранах шириной менее 768 пикселей (что является стандартным для телефонов и некоторых планшетов) значение Display изменится на Нет (что убирает).

Mobile: вы увидите, что мобильный контент имеет значение Display , равное Нет на обычных экранах, но на экранах шириной менее 768 пикселей (что является стандартным для телефонов и некоторых планшетов) значение Display изменится на Блок (который его убирает).


Метод 2: Показать и скрыть различное содержимое в Beaver Builder

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

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

После установки Beaver Builder и редактирования страницы просто выполните следующие действия:

Шаг 1. Добавьте содержимое рабочего стола

Давайте начнем с добавления содержимого для устройств DESKTOP, для этого убедитесь, что вы находитесь в режиме Page Builder (где вы можете перетаскивать модули на страницу) и перетащите ЛЮБОЙ модуль Beaver Builder на свою страницу , I Я просто собираюсь использовать простой текстовый модуль:

Добавьте свой контент DESKTOP в этот модуль.В этом примере я просто использую латинский текст-заполнитель, но этот метод будет работать с любым контентом.

Шаг 2 - Установите настройки дисплея

Щелкните вкладку Advanced в верхней части всплывающего окна и в разделе Display выберите Large & Medium Devices Only … затем Save your changes.

Шаг 3. Добавьте свой мобильный контент

Теперь давайте добавим контент, который вы хотите отображать на MOBILE устройствах.Перетащите ЛЮБОЙ модуль (для этого урока я просто буду использовать текстовый модуль, но вы можете сделать то же самое для любой кнопки, почтового модуля, заголовка и т. Д.) НЕПОСРЕДСТВЕННО ПОД ПРЕДЫДУЩИМ МОДУЛЕМ «DESKTOP» , затем добавьте нужный контент для отображения на MOBILE устройствах. В этом примере я просто немного изменю текст и сделаю одно слово синим. Как это:

Шаг 4 - Установите настройки дисплея

Щелкните вкладку Advanced в верхней части модуля и в разделе Display выберите Small Devices Only … затем Сохранить изменения вашего модуля.Должно получиться так:

На этом этапе (когда вы все еще находитесь в режиме компоновщика страниц) вы все еще должны видеть ОБЕ модули на вашем экране (как на скриншоте ниже)… это нормально! Когда вы сохраните изменения, волшебство начнется.

Шаг 5. Сохранение, публикация и просмотр

Нажмите кнопку Done (правый верхний угол экрана), а затем кнопку Publish , чтобы сохранить изменения. Затем просмотрите свою страницу на рабочем столе, а затем на телефоне ... заметили, как меняется содержимое? Вы также можете просто изменить размер браузера до размера мобильного устройства, например:

Это сделано? АГА!

Это круто? АГА!


Метод 3. Отображение и скрытие различного содержимого в Dynamik Website Builder

Итак ... вы используете Dynamik Website Builder & Genesis? Правильно? Вы хотите отображать и скрывать различный контент на настольных и мобильных устройствах ? Прохладно! Прохладно! Продолжайте читать…

Ниже я покажу вам очень простой волшебный трюк с использованием CSS, который покажет некоторый контент на настольных устройствах, а в том же месте покажет совершенно другой контент на мобильных устройствах.Мы также поговорим о видеоиграх, тако и моей сладкой мексиканской борцовской маске. Звучит неплохо? Звучит немного безумно? Да, черт возьми!

Готовы начать? Хорошо! Первое, что вам нужно сделать, это…

Шаг 1. Добавьте все свое содержимое

Без фундамента дом не построить. Без XBOX вы не сможете играть в видеоигры (вы - отстой PS4!). Без Taco Bus вы не сможете насладиться пикантным вкусом Taco Tuesday, а без вашего контента вы не сможете показать / скрыть этот контент.

Итак, мы сделаем это очень простым и очень очевидным… давайте покажем / скроем эти два изображения:

Понимаете, о чем я. Будет очень очевидно, что и куда должно идти, верно?

Здесь я должен упомянуть, что то, что вы собираетесь изучить, можно применить к тексту, видео, гиперссылкам и т. Д.… Нет предела тому, что вы можете показать / скрыть.

Еще раз, чтобы упростить задачу, я собираюсь сделать все это в области Header Right на сайте Академии веб-дизайнеров, но это можно сделать где угодно (боковая панель, контент, нижний колонтитул и т. Д.).

Для этого я добавил текстовый виджет справа в заголовок и поместил простые теги , которые ссылаются на эти изображения:

НЕ КОПИРУЙТЕ ЭТОТ HTML КОД, ЕЩЁ МОЛОДОЙ GRASSHOPPER!

Итак, с этим кодом сайт выглядит так на настольных компьютерах

и на моем айфоне (да, андроид отстой!)

Примечание: я ненавижу бриться, поэтому прошу прощения за лишние волосы на лице.

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

Шаг 2 - Оберните его в теги DIV

Имея контент на месте, нам нужно отметить, какой контент следует отображать и скрывать… мы сделаем это, заключив каждый фрагмент в собственный тег DIV.

Давайте упростим задачу. Давайте использовать тег div content-mobile для мобильного контента и тег div content-desktop для обозначения содержимого рабочего стола.

Гениальный нейминг, я знаю!

Возвращение к моему правому виджету заголовка и упаковка двух частей контента (в данном случае изображений) в эти теги теперь выглядит так:

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

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







Вы это сделали? Хорошо!

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

Итак, теперь, когда две части контента четко определены разными тегами DIV, теперь нам нужно…

Шаг 3. Добавьте CSS для отображения ИЛИ скрытия классов Div

Вот несколько запутанная часть (часть, на которой Эми все время зацикливается).Теперь нам нужно сообщить сайту (используя CSS) следующее:

  1. На ПК: скрыть МОБИЛЬНЫЙ контент
  2. На мобильных устройствах: скрыть содержимое DESKTOP и показать содержимое MOBILE

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

Предполагая, что вы используете Genesis + Dynamik Website Builder (а вы должны использовать), давайте начнем с перехода к Genesis> Dynamik Custom> CSS.

Там вы найдете болванку для ввода пользовательского CSS ... но вот вопрос: что контролирует CSS, который вы вводите в это поле? Сайт для ПК или сайт для мобильных устройств?

ХЧЧмммм.

Ответ: ОБА.

Что?

Разум = взорван!?!

Это правда, CSS в этом большом поле влияет на веб-сайт (где бы он ни находился), поэтому нам нужно указать, что делать с КАЖДЫМ классом DIV в этом поле, ЗАТЕМ мы сделаем то же самое, но только для мобильных устройств.

Если вы помните (примерно 30 секунд назад), мы хотим скрыть МОБИЛЬНЫЙ контент и отображать НАСТОЛЬНЫЙ компьютер на настольных устройствах. Для этого нам нужно ввести этот CSS:

Скопируйте приведенный ниже код CSS и вставьте его в это место:

# content-desktop {
display: inline;
}

# content-mobile {
display: none;
}

Теперь волшебство начинает происходить.

Посмотрите, как сейчас выглядит сайт на моем рабочем столе:

Видите, как ушел мобильный образ? Его нет, потому что CSS сообщает display: none … что на сленге означает: убирайся отсюда к черту.Итак, изображение мобильного контента исчезло.

Bbbuuuuuuutttttt….

Это также пропало на моем телефоне:

Примечание. Вот мое впечатление об этом смайлике

🙁

Почему?

Поскольку поле Custom CSS влияет на веб-сайт везде, где он отображается… поэтому оно также скрывает его на моем телефоне.

Итак, давайте исправим это, чтобы отображать и скрывать различный контент там, где мы хотим!

Чтобы исправить это, нам нужно перейти в Genesis> Dynamik Design> Responsive и перейти к значку полностью вправо.Так…. тот, который окружен пунктирным прямоугольником:

:

Каждый значок управляет определенным размером экрана, а размеры экрана обычно связаны с устройством, на котором он просматривается. Вот почему мы собираемся добавить немного CSS к единственному разу справа, потому что он управляет самыми маленькими экранами (например, мобильными устройствами).

Какой CSS мы должны добавить? Что ж, теперь нам нужно отменить стандартный CSS, который мы добавили выше, чтобы вместо СКРЫТИЯ мобильного контента мы хотели показать его, и вместо того, чтобы отображать содержимое DESKTOP, мы хотим это скрыть.

Итак, мы хотим добавить это:

# content-desktop {
display: none;
}

# content-mobile {
display: inline;
}

Видите, как изменилось отображаемое значение?

Вставьте его в это поле и сохраните изменения, чтобы ваш экран теперь выглядел так:

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

, а на мобильных устройствах это выглядит так (синее изображение для мобильного контента ):

БОНУС: Помните ту маску, которую я подобрал на Косумеле, Мексика… ну, я подумал, что сейчас подходящее время надеть ее для вас! Добро пожаловать, интернет-люди.

Показать и скрыть различный контент - только представьте возможности

Как я уже упоминал выше, вы можете отображать и скрывать различный контент различными способами. Вы можете отображать видео YouTube на настольных компьютерах и отображать приветственное сообщение на мобильных устройствах. У вас может быть ссылка для загрузки PDF-файла на рабочий стол, а затем ссылка для просмотра карты Google на мобильных устройствах. Возьми? Хорошо!

Теперь вы знаете, и теперь вы можете показать / скрыть все, что захотите!

Твой друг.
Ян Андерсон «Борющийся в маске»

PS: Большое спасибо Бет (наша соседка со стороны залива) за идею этого урока CSS о том, как показывать и скрывать различный контент!

Эта статья была обновлена ​​22 мая 2018 г.

.

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

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

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

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