Для мобільних пристроїв роздільна здатність насправді велика, лише розмір екрана невеликий. виходячи з цього:
Відповіді:
Чуйний дизайн не ґрунтується ні на роздільній здатності екрану, ні на розмірі екрана. Натомість, чуйний дизайн заснований на вмісті та способі його виготовлення, що дозволяє йому відповідати всім розмірам і дозволам.
Те, як ви думаєте про чуйний дизайн, неправильне. Я припускаю, що ви походите з більш звичайного тла дизайну друку, так? Дизайн для Інтернету набагато більш вільний. Чуйні веб-сайти часто не мають однакових, звичайних точок перерви або конкретних розмірів / роздільної здатності, для яких вони зроблені, оскільки Інтернет дозволяє більше, ніж це - він дозволяє досягти всіх розмірів екрану. Такий ви можете спроектувати, використовуючи будь-які розміри, які підходять саме тому, що ви розробляєте, якщо вони розумні.
Зважаючи на це, найкраща практика - це створити мобільний перший спосіб, який насправді слід назвати мобільним - найважливішим . Це змушує зосередитись на найважливішому та можливому вмісті, а потім дозволяє додавати більше для великих екранів, а не змушувати вас починати більше на великих екранах, а потім видаляти речі при розробці для менших. Ви можете прочитати більше про це в моїй чуйній дизайнерській грунтовці .
Але ми також мусимо проектувати таким чином, що дозволяє реагувати. Найкраща практика, яка є живим прикладом, чи у формі прототипу, чи в якійсь програмі дротяного кадрування, а не статичним документом, як PSD. Що стосується сторони розробника, то нам слід використовувати чуйні підрозділи та структурувати наш код таким чином, що це має сенс.
Зважаючи на це, ви повинні розміщувати речі у вигляді пікселів, тобто роздільна здатність, а не розмір екрана.
І справді велике запитання!
Просто деякі думки тут коментують трохи суперечності, з якими ми стикаємось сьогодні.
Технологія - це не те, чим вона повинна бути з віків.
Усі ми повинні розробляти на основі одиниць реальної життєдіяльності (або набраних розмірів) , з певною мірою гнучкості та свободи, щоб користувач міг зробити додаткові коригування.
Але щоб знати вимірювання реального життя, нам потрібна обидві відомості. Фізичні розміри та роздільна здатність пристрою = щільність пікселів.
Але виявляється, що лише кілька років тому екранні пристрої починають оголошувати щільність пікселів. А деякі не декларують це на сервері, просто роблять про це велику рекламу. (Aka Ipad, Iphone)
Роздільна здатність дисплея може бути виявлена операційною системою, тому що необхідно обов'язково надсилати сигнал відповідно, але для розміру реального життя екрану нам потрібна величезна база даних кожної моделі. Не добре.
Це залишає нам тільки цю роздільну здатність екрану, що це є деяка інформація, яку ми можемо знати.
Але це абсолютно інший дизайн для великого FullHD-монітора, ніж та ж роздільна здатність на мобільному пристрої. Обидва 1920x1080. Ой.
Особливим випадком є те, що в проекторах, оскільки ми не маємо поняття про відстань, що проектується, та відстань глядачів.
Часткове рішення - це медіа-запити, векторні елементи тощо.
Для веб-дизайну: Принаймні, поки ми не знайдемо щось краще.
Конструкція рідини (відсотки) та природний потік, чітко визначені ділянки.
1920 шир
з медіа-запитом, ймовірно, на 1280
та / або в 1024
ймовірно, у 720
і 480.
з виявленням пристрою для додаткової підтримки.
Для рідних мобільних додатків
Оскільки це дуже специфічно, просто дотримуйтесь інструкцій торгової марки щодо користувальницького інтерфейсу та значків.
Відредаговано.
Чому вибираєте невелику роздільну здатність екрана на мобільному пристрої FullHD?
Смартфон має дійсну роздільну здатність FullHD, але зазвичай він оголошує невелику роздільну здатність для сервера та браузера. Ви можете протестувати це Google https://www.google.com/search?q=what+is+my+screen+resolution, щоб медіа-запити працювали.
По-перше, дякую всім за відповіді та дорогоцінні рекомендації, це точно допомогло!
Дозвольте додати свій висновок:
Практично орієнтація на роздільну здатність екрана мобільних пристроїв не є хорошою 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 і змінити розмір шрифту.
Поплавте діва ліворуч, щоб вони правильно вирівнювали наявний простір (або праворуч, якщо цього вимагає ваш дизайн).
4- Визначте точки перерви , використовуйте для цього чуйний інструмент тестування. Я використовую дизайнерський перегляд Firefox, просто звужуйте ширину, поки ви не досягнете точки, коли веб-сайт стане несправним (наприклад, 500px), тобто позначте його перервою.
Застосуйте нові правила CSS всередині медіа-запиту для цієї точки перерви (500 пікселів),
5- не забудьте зберегти якість та чіткість веб-сайту! якщо елементи стають незрозумілими і занадто близькими один до одного, тоді розгорніть ширину елементів, щоб зайняти ширину контейнера і змусити їх укладати вертикально,
і не забудьте надати новий розмір шрифту для тіла, щоб усі піделементи успадковували більший шрифт і ставали більш читабельними.
6- Повторіть чуйний тест і визначте свою другу точку розриву. Швидше за все, у вас не буде багато точок розриву, тому що ми тут використовуємо рідинний дизайн, і саме там, коли використання відсотків окупнеться!
Раніше я працював на великому веб-сайті з важкими елементами дизайну, і для цього було потрібно лише 2 медіа-запити :)
Сподіваюся, що це допоможе
Повідомлення про те, як чуйна сторінка поповнюється, ґрунтується на розмірах вікна перегляду (не екрана) у віртуальних пікселях (не реальних пікселів).
На традиційному робочому столі, де 1 віртуальний піксель = 1 реальний піксель, якщо у вашому браузері встановлено ширину 1000 пікселів, то сторінка переглянеться, щоб відповідати цьому.
На iPhone 6, де 1 віртуальний піксель (Apple називає ці точки ) = 3 реальні пікселі, ширина браузера - ширина екрана, і вміст буде переповнюватися відповідно до ширини 417 пікселів (хоча це насправді 1242 справжні пікселі)
Тож це трохи дивно, оскільки при наведених вище прикладах пристрій із меншою кількістю реальних пікселів насправді розглядається як ширший вікно перегляду у чуйному макеті.