Отзывчивый веб-дизайн основан на разрешении экрана или размере экрана?

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

  • Для дизайна веб-сайтов мы ориентируемся на разрешение экрана (например, 1920x1080)?
  • И для мобильных приложений . мы ориентируемся на размер экрана?
Не путайте виртуальные пиксели с реальными пикселями.

Ответы (4)

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

То, как вы думаете об адаптивном дизайне, неверно. Я предполагаю, что вы пришли из более традиционного печатного дизайна, да? Дизайн для Интернета гораздо более свободен. Адаптивные веб-сайты не часто имеют одинаковые, обычные точки останова или определенные размеры/разрешения, для которых они созданы, потому что сеть позволяет больше, чем это — она позволяет достичь всех размеров экрана. Таким образом, вы можете проектировать, используя любые размеры, подходящие для того, что вы проектируете, если они разумны.

С учетом сказанного, наилучшей практикой является дизайн, ориентированный на мобильные устройства, который на самом деле должен называться mobile-most-important . Это заставляет вас сосредоточиться на наиболее важном и возможном контенте, а затем позволяет вам добавлять больше для больших экранов вместо того, чтобы заставлять вас начинать с большего на больших экранах, а затем удалять элементы при разработке дизайна для маленьких. Подробнее об этом можно прочитать в моем учебнике по адаптивному дизайну .

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

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

Спасибо за ответ, приятель. Вообще-то я веб-разработчик и дизайнер, постарался изложить вопрос кратко, поэтому не стал углубляться в детали и методы, которыми пользуюсь. Вы правы, адаптивный дизайн не имеет правил, и это то, что я всегда говорю своим коллегам по работе, но только недавно я заметил, что, поскольку мобильные имеют высокое разрешение, то нет смысла тратить наше время на кодирование медиа-запросов для 468 пикселей для пример? и я должен ориентироваться на разрешение, верно?
Да, как я уже упоминал в последней строке, вас должно больше волновать разрешение, чем размер экрана.
Зак... Жаль, что это не дискуссионный форум :о) Я думаю совсем по другому. Я опубликую свой ответ. ;о)
После быстрого исследования я обнаружил кое-что важное, что упускают из виду большинство разработчиков. Если используется <meta name="viewport" content="width=device-width, initial-scale=1.0>, ширина браузера будет равна ширине устройства, Таким образом, медиа-запросы должны основываться на размере экрана, а не на разрешении!Это огромная разница, на которую я долгое время не обращал внимания XD
@Engineeroholic Это в моем учебнике по адаптивному дизайну, на который я ссылался :)
Однако «разрешение» тоже не является четким термином. Например, разрешение iPhone 6 составляет 1242 пикселя. Но на самом деле мы должны думать об этом как о 412 для целей реагирования.
@Engineeroholic это одно и то же. Вам нужно беспокоиться о виртуальном размере экрана в пикселях , который можно считать «разрешением» — по крайней мере, это «разрешение», которое использует браузер — даже если устройство не использует.
@ Зак, я давно знаю этот метатег, но я никогда не читал о нем подробно, чтобы узнать, что он на самом деле делает :)

Во-первых, спасибо всем за ответы и ценные рекомендации, это, безусловно, помогло!

Позвольте мне добавить мой вывод:

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

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

Чтобы достичь этого в реальной жизни, мы должны добавить метатег ширины области просмотра внутри <head>HTML-документов:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Пожалуйста, поправьте меня, если я ошибаюсь.

Обновлять:

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

1. Используйте метаданные окна просмотра (см. вверху), это также повысит рейтинг веб-страницы в результатах мобильного поиска в соответствии с Google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html

После тестирования выяснилось, что добавление только метаданных окна просмотра даст вашему сайту оценки в инструментах мобильного тестирования https://developers.google.com/speed/pagespeed/insights/

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

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

  • Используйте проценты для ширины и горизонтальных полей/отступов. (вертикальные поля могут иметь фиксированный размер в пикселях, если хотите. Прокрутка больше не проблема)

  • Используйте em для шрифтов, таким образом, когда вы изменяете размер шрифта для тела (или html) в медиа-запросе, все элементы CSS будут адаптироваться к этому размеру, использование px превратит его в кошмар, потому что вам нужно идти для каждого класса CSS и изменить его размер шрифта.

  • Поместите div влево, чтобы они правильно выровнялись по доступному пространству (или вправо, если этого требует ваш дизайн).

4- Определите точки останова , используйте для этого отзывчивый инструмент тестирования. Я использую вид адаптивного дизайна Firefox, просто уменьшаю ширину до тех пор, пока не достигну точки, где веб-сайт становится неисправным (например, 500 пикселей), что является точкой останова, отмечающей его.

Примените новые правила CSS внутри медиа-запроса для этой точки останова (500 пикселей),

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

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

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

Раньше я работал над большим веб-сайтом с тяжелыми элементами дизайна, и для этого требовалось всего 2 медиа-запроса :)

Надеюсь, это поможет

Если вы найдете ответ полезным, вы должны проголосовать за него, чтобы показать так
Вы должны проектировать для разрешения виртуального экрана . Размер экрана является неправильным, поскольку на самом деле вы не проектируете конкретные размеры в дюймах или сантиметрах.
Кроме того, начальный масштаб можно применить к большой веб-странице. Затем он просто уменьшит его, чтобы он соответствовал размеру, который не отвечает.
@ZachSaucier, я бы хотел проголосовать за ответы своих колледжей. К сожалению, я не могу, потому что моя репутация меньше 15! Я считаю, что этот запрет следует снять.
@ DA01, да, размер экрана — неправильное название, это просто общий термин. Сленговое выражение «размер экрана» здесь относится к размерам экрана в пикселях (а не к разрешению экрана).
Я не говорил поставить <meta> и остановиться, если вы читали дальше, я объяснил, как использовать медиа-запросы для установки адаптивных правил для веб-элементов. Я добавлю сюда, что я обнаружил, что лучше всего использовать смесь, реагирующую на текучесть, где ширина элементов указывается в процентах (%), а при небольшой ширине элементы могут занимать 100% ширины, поэтому соседние элементы перемещаются вниз на новую строку. Конечно, использование поплавков будет иметь решающее значение.
Немного снисходительно, что вы опубликовали ответ, чтобы объяснить людям, которые явно разбираются в этом предмете намного лучше вас. Кроме того, дизайн для фактического размера экрана — это немного безумная идея, поскольку в последний раз я проверял 232 различных размера экрана. Вы должны проектировать с пороговыми значениями ширины экрана (т. е. от 320 до 480 пикселей должны выглядеть...), а не с конкретными значениями. Вы обнаружите, что вскоре все начинает выходить из-под контроля, если вы пытаетесь разработать дизайн для определенных размеров.
Я думаю, вы просто неправильно поняли мою мысль, английский не мой родной язык, также я не стал вдаваться в подробности и пошагово объяснять создание идеального адаптивного дизайна, потому что это не было целью моего вопроса. мой вопрос заключался в том, на что я должен ориентироваться (с чего мне начать с разрешения или размера).
@Dom, сначала позвольте мне представиться, я веб-разработчик и дизайнер с 3-летним опытом работы, и у меня было много успешных проектов с крупными корпорациями в моем регионе. Я сделал сложные веб-сайты с высоким уровнем дизайна. Я надеюсь, что я не снисходителен или дерзок. Действительно, я разместил свой вопрос с целью сбора мнений для лучшей практики, а не для объяснения его мне, как я сказал, что делал это много раз и успешно. Во-вторых, экранов, конечно, много, и, конечно, я не буду таргетировать каждый по отдельности, я опубликую свой план в ответе, чтобы объяснить дальше.
@Dom, проверьте раздел обновлений, пожалуйста, ваши отзывы будут оценены (я хотел написать о более подробной информации, например о проблемах с изображениями, но я думаю, что это сделает ответ слишком длинным и скучным ^^)
@ZachSaucier, только что получил +15 репутации .. Наконец-то я проголосовал :)
Хотя это и не совсем неверно, советы, которые вы дали, скорее зависят от контекста. Потребовалось бы большое эссе, чтобы правильно объяснить то, что вы здесь резюмируете. Лично я перестал пытаться создавать его с нуля, так как это намного эффективнее делается командой, а не отдельным человеком. Если вы хотите сократить объем работы, взгляните на структуру материального дизайна Google. Это значительно упрощает весь процесс, и его нетрудно понять.
Я думаю, что это слишком просто, чтобы требовать фреймворк, в моей работе большую часть времени мы делаем отзывчивый менее чем за день, самые большие проекты заняли 2 дня. Также таким образом мы можем гарантировать, что он будет работать для всех видов веб-сайтов с высокой графикой.

Действительно отличный вопрос!

Мой запутанный длинный ответ: нет и оба

Здесь просто несколько мыслей, немного комментирующих противоречия, с которыми мы сталкиваемся сегодня.

Технология не то , что она должна быть с возрастов.

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

Но чтобы узнать реальные измерения, нам нужны обе информации. Физические размеры и разрешение устройства = плотность пикселей.

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

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

Это оставляет нам только это разрешение экрана, что это некоторая информация, которую мы можем знать.

Но дизайн для большого монитора FullHD совершенно отличается от того же разрешения на мобильном устройстве. Оба 1920х1080. Ой.

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

Частичным решением являются медиа-запросы, векторные элементы и т. д.

Краткий ответ

Для веб-дизайна: по крайней мере, пока мы не найдем что-то лучше.

Жидкий дизайн (в процентах) и естественный поток, четко определенные секции.

  • 1920 в ширину

  • с медиа-запросом, вероятно, на 1280

  • и/или в 1024

  • наверное 720

  • и 480.

с обнаружением устройства для дополнительной поддержки.

Для мобильных нативных приложений

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

Отредактировано.

Зачем выбирать маленькое разрешение экрана на мобильном устройстве FullHD?

Смартфон имеет реальное разрешение FullHD, но обычно он декларирует маленькое разрешение серверу и браузеру. Вы можете проверить это в Google https://www.google.com/search?q=what+is+my+screen+resolution , чтобы медиа-запросы работали.

что с высотой? и это то, с чем я столкнулся сегодня на работе, когда клиент запросил отзывчивый веб-сайт вообще без вертикальной прокрутки (очень странно!), Это была большая головная боль для всех разрешений и приведет к слишком много медиа-запросов! в конце концов я использовал сочетание гибкого дизайна, одного медиа-запроса и CSS-трюка; где впервые в жизни я сделал нижний колонтитул с абсолютной позицией и нижним = 0, чтобы он оставался внизу на длинных экранах. (где я нахожу это неправильным кодированием), таким образом, я использовал медиа-запрос только для экранов короче, чем контент. Таким образом, мне нужно было использовать только 1 запрос

Способ перекомпоновки адаптивной страницы зависит от размеров области просмотра (не экрана) в виртуальных пикселях (не реальных пикселях).

На традиционном рабочем столе, где 1 виртуальный пиксель = 1 реальному пикселю, если в вашем браузере установлена ​​ширина 1000 пикселей, страница будет перекомпоновываться в соответствии с этим.

На iPhone 6, где 1 виртуальный пиксель (Apple называет эти точки ) = 3 реальным пикселям, ширина браузера равна ширине экрана, а содержимое будет перекомпоновываться, чтобы соответствовать ширине 417 пикселей (хотя на самом деле это 1242 реальных пикселя).

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

Хотя это правда, я все еще думаю, что важно сосредоточиться на адаптивном дизайне, а не на экране, на котором он просматривается.
@ZachSaucier ммм ... я согласен? Я думаю? Я не знаю. Это одно и то же, не так ли? Отзывчивый дизайн — это приспособление к различным размерам окон просмотра. Кажется, они идут рука об руку. Это не отзывчиво, если вы также не думаете о различных размерах, в которые он будет перетекать.
Что случилось с последними 9px?
Отзывчивый веб-дизайн основан на разрешении экрана или размере экрана?
СпросиСетьПолитика конфиденциальности1y, 0v