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

11

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

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

Ответы:

6

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

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

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

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

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

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

Отличный вопрос!

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

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

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

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

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

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

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

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

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

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

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

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

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

Расчет жидкости (проценты) и естественный поток, четко определенные участки.

  • 1920 в ширину

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

  • и / или в 1024

  • вероятно на 720

  • и 480.

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

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

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


Ред.

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

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

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

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

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

Практически, ориентация на разрешение экрана мобильного устройства не очень хорошая 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 media-запросов), для достижения этой цели:

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

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

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

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

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

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

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

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

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

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

Engineeroholic
источник
2
Если вы нашли ответ полезным, вы должны проголосовать за него, так что покажите
Зак Сауцер
Вы должны проектировать для разрешения виртуального экрана . Размер экрана является неправильным, так как вы на самом деле не проектируете под конкретные размеры в дюймах или сантиметрах.
DA01
Кроме того, начальный масштаб может быть применен к огромной веб-странице. Это тогда просто сократит это, чтобы соответствовать, который не отзывчив.
DA01
@ ZachSaucier, я хотел бы высказать свои ответы колледжей. к сожалению, я не могу, потому что моя репутация меньше 15! Я думаю, что этот запрет должен быть снят.
Инженероголик
@ DA01, да, размер экрана неправильный, это просто общий термин. Говорят, что размер экрана здесь относится к размерам экрана в пикселях (а не к разрешению экрана).
Инженероголик
2

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

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

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

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

DA01
источник
Хотя это и правда, я все же думаю, что важнее всего сосредоточиться на адаптивном дизайне, а не на экране, на котором он просматривается
Зак Соусье
@ ZachSaucier хмм ... я согласен? Я думаю? Я не знаю. Это одно и то же, не так ли? Адаптивный дизайн предназначен для размещения различных размеров видовых экранов. Кажется, они идут рука об руку. Он не реагирует, если вы не думаете о различных размерах, в которые он попадет.
DA01
Что случилось с последними 9px?
Янус Бах Жакет