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