Популярні роздільні здатності екрану. Роздільна здатність дисплея телефону: яке вибрати
Технічні журналісти вже не перших рік кричать про еру пост-PC, продаж комп'ютерів традиційних форм-факторів невблаганно падає, як і акції їх виробників. Проте кількість мобільних пристроїв, смартфонів або планшетів, неухильно зростає.
Для дизайнера це означає насамперед те, що є в ТЗ хоч щось про мобільні пристрої чи ні, він повинен намалювати макет так, щоб із телефону (і, поготів, планшета) сайтом можна було користуватися. І це означає не тільки те, що по кнопках має бути можливо потрапити пальцем. В ідеалі, звичайно, у сайту має бути окрема Мобільна версіяАле, як показує наш досвід, більшість клієнтів не хоче виділяти на неї додаткові кошти, але неодмінно скаржаться, якщо у них щось не працює з його улюбленого яблучного дивайсу.
Перевага цього макету сторінки та недостатності полягає в тому, що веб-сторінка автоматично налаштовується на ширину екрана браузера. З одного боку, це дозволяє вам не турбуватися про пристрій, на якому переглядатиметься веб-сторінка.
Створення макету рідини було призначено для вирішення проблем веб-дизайнерів, але вони створили інші. Тому ця «чиста» система практично ніколи не використовується. Плавний макет сторінки використовується разом із іншими макетами сторінок. Наприклад, зі статичним розташуванням. У цьому випадку ви можете отримати дуже цікаві результати зі зміною розміру стовпців.
Згадуючи ті граблі, на які наступали знайомі мені дизайнери, перше, що викликає проблеми з намальованими ними макетами - це відсутність точних уявлень про те, скільки пікселів влізе на екран з номінальною роздільною здатністю вище, ніж у настільного 20' монітора. Що ж, нічого страшного, на це і був розрахований маркетинг великих цифр. Ця стаття допоможе розібратися в ситуації, що склалася.
Адаптивна макет сторінки
Це можливо завдяки широкому спектру мультимедійних функцій, включаючи ширину, висоту, ширину, висоту пристрою, орієнтацію, співвідношення сторін, співвідношення сторін зображення, глибину кольору, колірну палітру, монохромність, роздільна здатність, технологію відображення, сітку. Як і у разі статичного макета, адаптивне компонування сторінки використовує пікселі як постійну одиницю. Але різниця в тому, що постійний розмір сторінки створюється на основі запитів ЗМІ, як ми згадували вище.
Запити ЗМІ – це слова логіки, які при об'єднанні утворюють базовий алгоритм. Наприклад, адаптивний макет сторінки може сказати щось на зразок: Якщо ширина браузера становить 500 пікселів, основний контейнер повинен бути встановлений на 400 пікселів. Наприклад, розташування двох стовпців може змінюватися в один стовпець, коли браузер занадто вузький. Щоб перевірити та протестувати цей макет, ви можете використати відомий код Фейсала Рассела.
Йдеться про пристрої на Android та iOS, WP поки що екзотика, і без досвіду особистого звернення я не візьмуся давати рекомендації.
Якщо в HTML документі відсутні метатеги, що говорять мобільному браузеру щось про те, в якій ширині відображати документ, то браузери будуть поводитися так, як ширина документа 980 пікселів. Це справедливо як для телефонів із шириною екрану в 320 пікселів, так і для 10-дюймових таблеток, які використовують Android та iOS та браузер на Webkit. Такий підхід передбачає, що сайти з мінімальною шириною 960 пікселів отримають невеликі поля для зручності сприйняття контенту.
Адаптивне компонування - хороше рішенняза допомогою різних мобільних пристроїв. Для того, щоб сайт відповідав відповідним мобільним пристроям в адаптивному макеті, потрібно значно менше часу, ніж використання веб-сайту з гнучким макетом сторінки.
Чуйний макет сторінки
Ширина пристрою і явні граничні значення часто далекі від ідеальних і мають занадто багато або занадто мало місця для нормального відображення веб-сторінки. Збільшення часу завантаження веб-сторінки. . І, нарешті, чуйний макет сайту, який також використовує реляційні одиниці та запити ЗМІ, поєднує в собі ідею гнучкого та адаптивного компонування. Відповідно, залежно від розміру вікна в браузері або на веб-сторінці, чуйний макет поводитиметься так, ніби він був рідким макетом.
Якщо мінімальна ширина документа більше, то поведінка браузерів починає різнитися. Safari в iPhone/iPad в більшості випадків просто стисне контент. В Android виявлять себе DIP - density-independent pixels, докладніше про які пізніше. Якщо ширина документа більше 980 і більше, ніж ширина пристрою в DIP, з'явиться праворуч прокручування. Так, сайт із шириною вмісту в 1040 пікселів буде відображатися без горизонтального прокручування на iPhone і IPad (1024 пікселів), але з прокручуванням на телефонах на зразок galaxy S3 (фізична роздільна здатність 1280х720) або планшеті Nexus 7 (фізична роздільна здатність 12).
Але якщо браузер виходить за межі певної ширини, що визначається запитами мультимедіа, відповідь змінюватиме сторінку, щоб вона відповідала ширині вікна. Сторінки, засновані на гнучкому компонуванні, найчастіше будуються з використанням підходу "мобільний-перший". Це означає, що перший макет створюється для смартфона, а потім додається розширення перегляду на планшеті або комп'ютері. "Мобільний-перший" підхід дозволяє заощадити багато часу, тому що простіше розширити веб-дизайн, ніж спростити великий макет для екранів телефону.
Які слід зробити висновки? Незважаючи на велику кількість широкоформатних дисплеїв у настільних ПК і ноутбуках, стара добра сітка на 960 пікселів не втратила своєї актуальності. Мобільні браузери мають таку ж властивість підганяти текстові блокиу формат, що зручно читається на пристрої, наприклад, підтискати текст у вузький стовпець на телефоні та збільшувати його шрифт. Це не вийде, якщо текст, що містить блок, жорстко обмежений по висоті. Насправді взагалі ніколи не варто робити сайт, де щось обмежене по висоті, особливо якщо плануються відвідувачі з мобільних пристроїв. Ще один ворог мобільних пристроїв, особливо телефонів - це елементи з position:fixed. Наприклад, модна нині кнопка назад, що наполегливо бігає за користувачем по сторінці. Ще гірше – великі плашки, на кшталт фіксованої шапки. Такі елементи займають не тільки корисну площу на малому екрані, але й залишаються на колишньому місці при збільшенні. Проблема характерна також для модальних вікон. Якщо вони відображаються посередині екрана, то з мобільного збільшення їхнього вмісту вимагає неабиякої спритності. Використання попапів на кшталт “будь на зв'язку з нами в соціальних мережах!”, які ведуть себе подібним чином - взагалі люта неповага до користувачів мобільних пристроїв, тому що найчастіше залишити сайт простіше, ніж закрити цей попап.
Відповідальний макет сторінки можна протестувати за допомогою коду Фейсала Рассел. Безперечно, чуйний макет сторінки - це найновіший підхід до створення сторінок серед представлених рішень і дозволяє створювати сучасні веб-сайти, які відображатимуться на різних мобільних пристроях.
Чи завжди чуйний макет сторінки – найкращий варіант для мобільних пристроїв?
Адаптивне компонування сторінок втрачає час реагування під час завантаження веб-сторінки на мобільному пристроїта придатності мобільної версії сайту до оригіналу. Чи є альтернатива старим сторінкам крім гнучкого макета сторінки під час створення веб-сайту для мобільних пристроїв. Дуже старим рішенням може бути мобільна версія. Але вона менше використовується щороку. Тільки для кого вона може бути використана – для старих веб-сайтів, які не планують міняти.
Розглянемо з прикладу парочки сайтів.
Незважаючи на те, що лента.ру має дуже пристойну мобільну версію, автоматичний перехід на неї не провадиться. У настільній fixed-меню залазить на текст при автоматичному масштабуванні. Перед користувачем виникає вибір або масштабувати руками, або не полінуватися прописати m. в url.
У всякому разі, майте на увазі, що світ не стоїть на місці, а також веб-дизайн. Все це змушує сайти змінювати разом із появою нових тенденцій, які вимагають користувачі. І щоб мати сайт, який завжди був цікавий людям, ви маєте бути з ними на одній хвилі.
Це правда, що ці екрани не є ідеальними, але їм не вистачає ідеї, ніж будь-який інший. Ми довго хвалили їх за їхню чудову кольоропередачу, високу максимальну яскравість та дійсно темно-чорний. Значною мірою це вірно, тому що в технічному плані останній рік трохи змінився, але він не означає, що нічого не змінилося.
РБК. Взагалі у них теж є мобільна версія, але перехід на неї здійснюється лише з головної сторінки. За прямим посиланням (з Google News, зокрема) можна спостерігати це нечитабельне полотно. Чи затримається відвідувач на такому сайті? Ледве.
Початківцям потрібно дивитися трохи глибше. Поліпшено автоматичне налаштуванняяскравості. Це було зроблено для того, щоб система запам'ятовувала коригування яскравості користувача та навколишнє світло, виміряне датчиком, щоб наступного разу встановити правильну яскравість екрана.
Кілька днів навчання Примітка та 7 на власний розсуд робить автоматизацію завжди заданою. Якщо датчик фар або головка користувача потрапляють на головний датчик, він відразу не змінить яскравість, тому що задня частина скаже йому, що загальна інтенсивність навколишнього світла не змінилася. При виборі обладнання немає нічого великого або щось думати, тому що добре зроблене автоматичне налаштування - це те, яке ви не помічаєте, але кожен користувач смартфона, який це зробив, знає, як це дратує.
Суперканоніческій попап на РБК-стайл. Визначний приклад того, як не треба робити.
Інтан, який верстав, вгадайте хто. Я, зрозуміло, чудово розумів, чому не можна так чинити з меню, але якось не було настрою сперечатися. Поставити питання взагалі не в тему.
І як може зіпсувати враження. І оскільки у віртуальних руках автоматизації є щось, то бажано знати, що з нею робити. Фільтр синього світла. Назва корпусу, але проста операція. При включенні колірна температура дисплея стає дуже низькою, тому зір стає меншим вечорами, коли телефон використовується в приміщеннях, освітлених вогнем, що, до речі, зменшує проблему порушень сну, викликаних синім світлом. діоди.
У ньому є вдосконалення. Однак, все це безперечно позитивно. Але загалом ми нічого не очікували. Наприкінці ще одна дрібниця. Поляризаційний фільтр поляризованих сонцезахисних окулярів дозволяє вільно використовувати примітку 7 як по горизонталі, так і по вертикалі. Однак, під час сонячного відпочинку нічого не корисно.
Ще одна штука, яка зазвичай не виправдовує витрати часу у настільному вигляді та викликає проблеми у мобільному – це кастомні елементи форм. Те, що засобами CSSвони майже не налаштовуються, вийшло не просто тому, що консорціум всесвітньої павутинибуло ліньки.
Наприклад, ви намалювали красивий список, що випадає. Припустимо, в настільному браузері він схожий на все інше, відкривається по кліку миші і прокручується її коліщатком. Але в мобільному робота з такими елементами у вас викличе великі проблеми. Якби select був стандартним, користувачеві показали системне вікно з барабаном/випадаючим списком, залежно від ОС.
Зовнішній вигляд коробки мінімалістський і справляє гарне перше враження. Вибирайте із перлинного білого, блакитного, золотого шампанського, срібла платини та м'якого рожевого. Алюмінієвий корпус є основним елементом дизайну корейського кіоску. Більшість кнопок також виготовлені з того самого матеріалу, за винятком того, що вони знаходяться трохи нижче дисплея. Найголовніше, що корпус і каркас мають той самий колір, тому ми не вибиратимемо його, це буде один тон.
Всі кнопки та порти на цій моделі знаходяться в тих самих місцях, що і попередник. Вище це динамік для розмови, датчик наближення та освітлення. Нижче дисплея знаходиться класичне розташування функціональних клавіш. Це, відповідно, початок, назад та багатозадачність.
А можливість прикріпити файл у iOS відсутня як така. І якщо стандартний вид кнопки натякне користувачеві, що вона відключена, то якась яскрава красива кнопка викликатиме відчуття того, що на вашому сайті щось не працює.
Звичайно, в ідеалі мобільний пристрій має бути визначено, і для мобільних пристроїв скрипти, спрямовані на зміну стандартного інтерфейсу, не повинні виконуватися.
У цій моделі маємо більший діагональний дисплей, який становить 5 дюймів. На жаль, кольори зовсім небагато від землі. Дисплей має кілька різних режимів, які трохи покращують передачу кольору. Режими відображення несумісні зі сторонніми програмами.
Виробник зробив гарну роботу, дисплей читається навіть при сонячному світлі завдяки впровадженню покриття антивідблиску. Перегляд вмісту залишається видимим, а контраст не змінюється. Кут огляду також дуже гарний, що показує, що він може зробити дуже гарний дисплей.
Ще однією неприємною особливістю мобільних браузерівє те, що в даний час вони не кешують шрифти, що підключаються. Той же PT Sans у всіх написах, підключений з Google Web Fonts, вантажиться відчутно довго. При цьому навряд чи він так уже відчутно програє вбудованим Helvetica/Roboto. Добре подумайте, чи зайвий час завантаження вашого кастомного шрифту.
Можливості підключення та веб-браузер
Зрозуміло, що ви можете використовувати його протягом дня або довше по одній зарядці, якщо ми обмежимо ці три операції мінімумом. 1:00. Останнє дозволяє покращити сполучення периферійних пристроївзі смартфоном. Проблеми виникають під час підключення до смартфону, який працює як точка доступу. Якщо більше двох пристроїв використовують цю функцію, сторінки завантажуються значно довше.
Екран блокування залишається незмінним. Ми все ще можемо прочитати, який час і який день тижня ми знаходимося. Ми можемо налаштувати до 5 основних робочих столів, змінити їх порядок та вибрати один із них як основний. Навіть жест двох пальців не працюватиме.
Розміри та роздільна здатність екранів мобільних пристроїв. Різниця між фізичною роздільною здатністю екрана та роздільною здатністю в мобільному браузері
У iPhone та iPad використовується поняття точок – apple points. Роздільна здатність iPhone аж до 5 моделі - 320 на 480 пікселів. Що таке Retina Display? Retina Display використовує подвійну щільність пікселів, тобто на одну точку припадає 4 фізичні пікселі. Так, у iPhone 4 при фізичному дозволі екрану 640 на 960 пікселів все ж таки 320 на 480 пікселів. Але при цьому графіка більш деталізована за рахунок використання вдвічі більших зображень у додатках. Для iPhone 5 значення в точках збільшилося з 480 до 568. У iPad всіх версій, включаючи Mini, воно незмінне – 1024х768.
На практиці це означає, що нам доведеться пройти все, перш ніж вмикати функцію, яку ми вибираємо. Системні налаштуваннявідображаються вертикально та класифікуються. На жаль, тут є Пошукова системаТому початковий користувач може зіткнутися з проблемами, у той час як перебір після них.
У сітці програм можна встановити алфавітний дисплей програми або тільки ті, які ми завантажили. Ви також можете приховати програми, що не використовуються, а деякі навіть перестануть звільняти пам'ять. Отже, ми можемо відключити їх усі або подивитися, скільки пам'яті зайнято запуском додатків, а також пам'яттю, що залишилася.
За замовчуванням в масштабі 1 до 1 стандартна графіка в web (наприклад, background-image) буде відображена як би збільшеному вдвічі вигляді, на 4 пікселі фізичного екрану буде розтягнутий один піксел растрового зображення. Як використовувати графіку високого дозволуу такій ситуації ми розглянемо у наступному розділі. Головне, що потрібно пам'ятати про дозволи iOS пристроїв- не треба думати, що сторінки в ретині та не-ретині мають різну ширину. Ні, різниця тільки в щільності пікселів, пропорції ті самі.
На практиці це означає зменшення розміру інтерфейсу користувача, що дозволить керувати однією рукою. Ми можемо вільно настроювати розмір вікна, в якому знаходиться інтерфейс, та змінювати його положення. Решта екрану залишається чорною, тому вона не турбує акумулятор. Ніщо не заважає вам використовувати один і той же додаток одночасно і не відрізняється. У нього багато непотрібної анімації та ефектів, які заважають мені у повсякденному використанні. Результати цього класу обладнання задовільні, ми спочатку зосередимося на загальну продуктивність.
В Android ситуація набагато складніша, точніше, різноманітніша. В Android використовується поняття different screen densities (DPI). Суть його в тому, що при різних фізичних розмірах дисплея і роздільної здатності модель поведінки по точках відрізняється в залежності від призначення пристрою. аналогом Points служить вищезгаданий DIP.
Щільність екрану - 1. До цієї категорії входить безліч пристроїв, такі як телефони 320х480 (HTC Hero, LG Optimus One), 7-дюймові таблетки 1024х600 ( Samsung Galaxy Tab, Kindle Fire), 10-дюймові таблетки ( Asus Transformer, Acer A500, Galaxy Tab 10’1).
Можна бачити, що це обладнання із середньої цінової полиці, тому не питайте, що бозна-що. Кожен із моїх тестів продуктивності показує, що це пристрій середнього розміру, хоча можна сказати, що бюджет. При повсякденному використанні та вихідних дзвінках корейський продукт не мав проблем з правильним покриттям. Звук розмов був гучним та ясним. Зниження шуму допомогло під час відкритих розмов і було також добрим.
Галерея, музика та фільми
Додаток системи «Галерея» було зроблено мінімалістичним. Фотографії та відео можна сортувати за. альбом, місцезнаходження та багато іншого. Панель ліворуч допоможе нам перемикатися між усіма доступними альбомами на мобільному пристрої. Є також редагування фотографій, обрізка, поворот, перенесення кольорів і багато іншого.
Щільність екрану 1,33 використовується в 7-ми дюймових планшетах на кшталт Nexus 7. Фізична роздільна здатність - 1280х800, DIP - 960х600.
Щільність екрану 1,5 - мобільні телефонивисокою цінової категорії 2011 року та середньої 2012 року, 10-ти дюймові планшети з FullHD. Наприклад, Nexus One 480x800 пікселів, 360х533* DIP, HTC One S - 540х960 пікселів, 360х640 DIP, та Asus Transformer Pad Infinity 1920x1200 пікселів, 1280х800 DIP.
*на Android Developers зустрічається 534, але вимір ширини браузера через JS показує саме 533, відповідно і в медіазапитах варто орієнтуватися на цю цифру.
Щільність екрану 2 – телефони високої цінової категорії 2012 року та буквально пара планшетів. Наприклад, HTC One X, Samsung Galaxy S3 - роздільна здатність екрану 1280х720, розміри в DIP 360х640. Планшет Google Nexus 10 - роздільна здатність 2560х1600 пікселів, 1280х800 DIP.
Щільність екрану 3 – флагмани 2013 року з FullHD дисплеєм. При дозволі в 1920х1080 пікселів у них ті ж 360х640 DIP.
При цьому є ще вибивається з колії Google Nexus 4 c екраном в 1280х768 пікселів із щільністю 2 (384х640). У моделях з екранними клавішами 42DIP займає панель для них, тому в таких моделях (Galaxy Nexus, Nexus 4, Sony Xperia Z) у портретному режимі портретна роздільна здатність буде дещо меншою, і становитиме 598 пікселів.
Таким чином, у нас є три дозволи для портрета - 320, 460 та рідкісне 384, і чотири з половиною ландшафтних - 480, 533, 568, 640 (598 із софт-клавішами).
У планшетів це портретні 600 та 800, і ландшафтні 960, 1024 та 1280.
Таблиця нижче наводить більшість типових дозволів найпопулярніших продуктів:
Як розпочати роботу над макетом мобільного додатка?
Для початку читайте гайдлайни. Програми під різні платформи мають виглядати по-різному. Ось, наприклад, пройшовши за посиланням, можна порівняти типові елементи різних ОС
Для роботи над макетом програми для iPhone створіть полотно 640x1136 (960) та використовуйте розміри, кратні двом. Вся графіка, всі шрифти мають бути такими.
Певну частину екрана у вашому майбутньому програмі можуть займати status bar з індикаторами сигналу, батареї тощо. Це 20 пікселів в iOS і 25 DIP в Android. У Android телефониз soft-клавішами та планшетах 48 DIP внизу екрана займає плашка під них (Navigation Bar). При цьому в неканонічних пристроях начебто планшетів Samsungчерез використання фірмової оболонки Navigation Bar та Status Bar поєднані.
Для програми під телефони на Android актуально купувати хост не менше 720х1280. Краще одразу 1080х1960, у розрахунку на сучасні флагмани.
Для полотна 720х1280 розміри так само повинні бути кратні двом, для 1080х1960 кратно трьом. Використовувати як полотно 480х800 або 640х960 – дуже погана ідея.
У процесі роботи над макетом потрібно періодично зменшувати розмір вікна. графічного редакторадо зразкових розмірів реального пристрою, а також зберігати JPG і переглядати його на цьому пристрої. Чи можна потрапити пальцем у кнопку? Чи не надто дрібний текст?
Використовуючи макет невідповідних розмірів, вина за кривий вигляд програми або її замилену графіку виявиться повністю на вас.
Загалом, будьте уважні до деталей і пам'ятайте – пікселі та точки/дипи – вже не одне й те саме.
Оптимізація Web-графіки для екранів високої щільності
Отже, ми дізналися про те, що існує декілька можливих варіантівщільність пікселів на дисплеї. Відповідно, щоб уникнути ефекту замиленої графіки, так само відомої як «ефект Playstation», нам необхідно або використовувати растрову графіку більшого дозволу, або векторну графікунаприклад, SVG.
При цьому підтримка SVG поки дуже обмежена, і для зворотної сумісності зі старими браузерами все одно доведеться використовувати растр. Іншим головним болем буде використання спрайтів - значення background-position потрібно буде вказувати у відсотках, що вимагатиме великих математичних обчислень. Найменш складним шляхом є використання декількох варіантів тих самих зображень, через медіа-запит, наприклад -webkit-min-device-pixel-ratio: 2.
Як можна помітити, методика сама по собі дуже проста і вимагає лише наявність декількох версій однієї і тієї ж картинки, якщо вона використана як background-image. Звичайні зображення при необхідності можна завантажувати вдвічі більшого, ніж вони повинні бути розміру і прописувати потрібний на сторінці розмір через атрибут style.
Зворотною стороною є, власне, більша вага картинок високої роздільної здатності. Тут потрібно вирішити, що важливіше - контент, який користувач побачить через більший через вагу сторінку проміжок часу, або оформлення.
Голосів: 416 | Переглядів: 4271Одним з основних параметрів кожного смартфона є роздільна здатність екрану. Давайте розберемося, що це таке і чому воно має таке велике значення.
Що таке роздільна здатність екрана?
Роздільна здатність дисплея - це величина, яка позначає кількість пікселів на дисплеї в довжину та ширину. Цей параметр є важливим, тому що визначає чіткість зображення кожного смартфона.
Роздільна здатність екрана впливає на якість зображення. Чим воно більше, тим якіснішим і чіткішим буде зображення. Якщо пристрій має великі габарити, але невелику роздільну здатність, то на малюнку будуть видні пікселі. Цифри і символи здаватимуться недостатньо чіткими і в окремих випадках кострубатими, як на старих кнопкових телефонах.
На даний момент 99 відсотків смартфонів виходять із трьома типами екранів.
- HD (1280x 720, 720p);
- Full HD (1920×1080, 1080p);
- Quad HD (2560×1440, 1440p).
Яку роздільну здатність екрана вибрати?
Одним із найпопулярніших дозволів дисплея смартфона є 1280 на 720 пікселів-HD. Практично всі гаджети бюджетного цінового сегмента оснащені таким показником.
Більше потужні пристроїобладнані дисплеями з більшою роздільною здатністю. Смартфони з екранами 1920-1080 з'явилися давно і вже нікого не дивують. Якщо діагональ смартфона становить від 4,5 до 5,5 дюймів, найкраще підійде екран 1920х1080 пікселів (Full HD). При меншій роздільній здатності на зображенні будуть помітні пікселі, і користувач може відчути дискомфорт. Напевно, це і є золота середина - ціни невисокі, зображення чітке та яскраве.
У діагоналі більше 5,5 і більше дюймів у флагманських пристроях використовується роздільна здатність Quad HD (2650×1440). Якість зображення тут висока, але, якщо вірити, людське око практично не в змозі помітити суттєву різницю. Quad HD - характеристика майбутнього, вона потрібна для технологій доповненої та віртуальної реальності.
