Для мобильных устройств разрешение действительно большое, только размер экрана маленький. исходя из этого:
Адаптивный дизайн не зависит ни от разрешения, ни от размера экрана. Вместо этого адаптивный дизайн основан на содержании и способе его создания , что позволяет ему соответствовать всем размерам и разрешениям.
То, как вы думаете об адаптивном дизайне, неверно. Я предполагаю, что вы пришли из более традиционного печатного дизайна, да? Дизайн для Интернета гораздо более свободен. Адаптивные веб-сайты не часто имеют одинаковые, обычные точки останова или определенные размеры/разрешения, для которых они созданы, потому что сеть позволяет больше, чем это — она позволяет достичь всех размеров экрана. Таким образом, вы можете проектировать, используя любые размеры, подходящие для того, что вы проектируете, если они разумны.
С учетом сказанного, наилучшей практикой является дизайн, ориентированный на мобильные устройства, который на самом деле должен называться mobile-most-important . Это заставляет вас сосредоточиться на наиболее важном и возможном контенте, а затем позволяет вам добавлять больше для больших экранов вместо того, чтобы заставлять вас начинать с большего на больших экранах, а затем удалять элементы при разработке дизайна для маленьких. Подробнее об этом можно прочитать в моем учебнике по адаптивному дизайну .
Но мы также должны проектировать таким образом, чтобы обеспечить отзывчивость. Лучшей практикой является живой пример, будь то в форме прототипа или в какой-либо программе для создания каркаса, а не статический документ, такой как PSD. Когда дело доходит до разработчиков, мы должны использовать адаптивные модули и структурировать наш код таким образом, чтобы это имело смысл.
С учетом сказанного, вы должны выражать вещи в пикселях, то есть в разрешении, а не в размере экрана.
Во-первых, спасибо всем за ответы и ценные рекомендации, это, безусловно, помогло!
Позвольте мне добавить мой вывод:
На практике таргетинг на разрешение мобильного экрана не является хорошим 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 медиа-запроса :)
Надеюсь, это поможет
Действительно отличный вопрос!
Здесь просто несколько мыслей, немного комментирующих противоречия, с которыми мы сталкиваемся сегодня.
Технология не то , что она должна быть с возрастов.
Мы все должны проектировать на основе реальных единиц измерения (или воспринимаемого размера) с некоторой степенью гибкости и свободы, чтобы позволить пользователю делать некоторые дополнительные настройки.
Но чтобы узнать реальные измерения, нам нужны обе информации. Физические размеры и разрешение устройства = плотность пикселей.
Но оказывается, буквально несколько лет назад экранные устройства начинают декларировать плотность пикселей. А некоторые и не заявляют об этом серверу, просто делают об этом много рекламы. (он же айпад, айфон)
Разрешение экрана может быть определено операционной системой, потому что необходимо послать соответствующий сигнал, но для реального размера экрана нам нужна огромная база данных каждой модели. Нехорошо.
Это оставляет нам только это разрешение экрана, что это некоторая информация, которую мы можем знать.
Но дизайн для большого монитора FullHD совершенно отличается от того же разрешения на мобильном устройстве. Оба 1920х1080. Ой.
Особым случаем является проектор, потому что мы не знаем расстояния проецирования и расстояния до зрителя.
Частичным решением являются медиа-запросы, векторные элементы и т. д.
Для веб-дизайна: по крайней мере, пока мы не найдем что-то лучше.
Жидкий дизайн (в процентах) и естественный поток, четко определенные секции.
1920 в ширину
с медиа-запросом, вероятно, на 1280
и/или в 1024
наверное 720
и 480.
с обнаружением устройства для дополнительной поддержки.
Для мобильных нативных приложений
Поскольку это очень специфично, просто следуйте рекомендациям бренда в отношении пользовательского интерфейса и значков.
Отредактировано.
Зачем выбирать маленькое разрешение экрана на мобильном устройстве FullHD?
Смартфон имеет реальное разрешение FullHD, но обычно он декларирует маленькое разрешение серверу и браузеру. Вы можете проверить это в Google https://www.google.com/search?q=what+is+my+screen+resolution , чтобы медиа-запросы работали.
Способ перекомпоновки адаптивной страницы зависит от размеров области просмотра (не экрана) в виртуальных пикселях (не реальных пикселях).
На традиционном рабочем столе, где 1 виртуальный пиксель = 1 реальному пикселю, если в вашем браузере установлена ширина 1000 пикселей, страница будет перекомпоновываться в соответствии с этим.
На iPhone 6, где 1 виртуальный пиксель (Apple называет эти точки ) = 3 реальным пикселям, ширина браузера равна ширине экрана, а содержимое будет перекомпоновываться, чтобы соответствовать ширине 417 пикселей (хотя на самом деле это 1242 реальных пикселя).
Так что это немного странно, поскольку в приведенных выше примерах устройство с меньшим количеством реальных пикселей фактически рассматривается как более широкое окно просмотра в адаптивном макете.
DA01