Най-често срещаните размери на монитора. Какво трябва да знае дизайнерът за мобилните устройства

Техническите журналисти вече не са първата година, крещяща за ерата на пост-PC, продажбите на компютри от традиционните форм фактори неизбежно намаляват, както и запасите на техните производители. Но броят на мобилните устройства, смартфоните или таблетите непрекъснато се увеличава.

За дизайнера, това означава, на първо място, дали има поне нещо в TK за мобилни устройства или не, той трябва да начертае оформление, така че сайтът да може да се използва от телефона (и още повече, таблетът). А това означава не само, че бутоните трябва да са възможни за пръст. В идеалния случай, сайтът трябва да има отделна мобилна версия, но, както показва нашият опит, повечето клиенти не искат да отпускат допълнителни средства за него, но със сигурност ще се оплакват, ако нещо не работи с любимото им устройство Apple.

Припомняйки, че дизайнерите ме познаха, първото нещо, което причинява проблеми с оформлението, което рисува, е липсата на точни идеи за това колко пиксела биха се побрали на екрана с номинална разделителна способност, по-висока от тази на 20-инчовия монитор. Е, това е добре. Тази статия ще помогне да се разбере ситуацията.

Става дума за устройства на Android и iOS, докато WP е все още екзотична и без личен опит, няма да се ангажирам да давам препоръки.

Ако в HTML документа няма мета тагове, които да кажат на мобилния браузър нещо за това колко широко да се показва документът, браузърите ще се държат така, сякаш документът е широк 980 пиксела. Това важи за телефони с ширина на екрана от 320 пиксела, както и за 10-инчови таблети с Android и iOS и браузър на Webkit. Този подход предполага, че сайтовете с минимална ширина от 960 пиксела ще получават малки полета за лесно възприемане на съдържанието.

Ако минималната ширина на документа е по-голяма, тогава поведението на браузърите започва да се различава. Safari на iPhone / iPad в повечето случаи просто ще компресира съдържанието. DIP ще се покаже в Android - пиксели, независими от плътността, повече за които по-късно. Ако ширината на документа е по-голяма от 980 и по-голяма от ширината на устройството в DIP, тя ще превърти надясно. По този начин, сайт с ширина на съдържанието 1040 пиксела ще бъде показан без хоризонтално превъртане на iPhone и iPad (1024 пиксела), но превъртане по телефони като галактиката S3 (физическа резолюция 1280x720) или таблетката Nexus 7 (физическа резолюция 1280x800).

Какви са заключенията? Въпреки изобилието от широкоекранни дисплеи в десктопите и лаптопите, добрата стара 960-пикселова мрежа не е загубила своето значение. Мобилните браузъри също имат възможност да поставят текстови блокове във формат, който е удобен за четене на устройството, например, за да натиснете текста в тясна колона на телефона и да увеличите неговия шрифт. Това няма да работи, ако текстът, съдържащ блока, е строго ограничен във височина. Всъщност, никога не трябва да правите сайт, където нещо да е ограничено по височина, особено ако посетителите са планирани от мобилни устройства. Друг враг на мобилните устройства, особено на телефоните, са елементи с позиция: фиксирана. Например, сега моден бутон назад, упорито работи след потребителя на страницата. Още по-лошо - големи умира, като фиксирана капачка. Такива елементи не само заемат полезно пространство на малък екран, но и остават на същото място по време на увеличение. Проблемът е характерен и за модалните прозорци. Ако те се показват в средата на екрана, след това от мобилен телефон увеличаването на съдържанието им изисква значителна сръчност. Използването на изскачащи прозорци като „да бъдем в контакт с нас в социалните мрежи!“, Поведение по подобен начин - като цяло силно неуважение към потребителите на мобилни устройства, защото често е по-лесно да напуснеш сайта, отколкото да го затвориш.

Помислете за пример на няколко сайта.

Въпреки факта, че tape.ru има много прилична мобилна версия, автоматичният преход към него не се извършва. В десктопа фиксираното меню се изкачва по текста с автоматично мащабиране. Преди потребителят да има избор или да мащабира с ръце, или да не бъде твърде мързелив, за да предпише m. в url.

RBC. Като цяло, те също имат мобилна версия, но преходът към нея се извършва само от главната страница. Пряка връзка (по-специално от Google Новини) може да се види това нечетливо платно. Ще остане ли посетител на такъв сайт? Едва ли.

Supercanonical popup отиде на RBC-стил. Не е необходим забележителен пример за това как да се направи.

Intan, коя версия предполага кой. Разбира се, напълно разбрах защо е грешно да правя това от менюто, но някак си нямаше настроение да споря. Задайте въпрос не в темата.

Друго нещо, което обикновено не оправдава времето, прекарано на работния плот и причинява проблеми в мобилния телефон, са персонализираните елементи на формуляра. Фактът, че почти не могат да се конфигурират от CSS, не беше просто защото консорциумът в интернет беше мързелив.

Например, извадихте красив падащ списък. Например, в настолен браузър той изглежда като всичко останало, той се отваря от едно щракване на мишката и се превърта с неговото колело. Но в мобилната работа с такива елементи ще предизвикате големи проблеми. Ако избраните са стандартни, на потребителя ще бъде показан системен прозорец с барабан / падащ списък, в зависимост от операционната система.

И възможността за прикачване на файл в iOS липсва като такъв. И ако стандартният вид на бутона подсказва на потребителя, че е забранен, тогава някой ярък красив бутон ще предизвика усещането, че нещо не работи на вашия сайт.

Разбира се, в идеалния случай трябва да се дефинира мобилно устройство, а за мобилните устройства скриптове, предназначени за промяна на стандартния интерфейс, да не се изпълняват.

Друга неприятна черта на мобилните браузъри е, че понастоящем не кешират шрифтове за приставки. Същите PT Sans във всички стилове, свързани с Google Web Fonts, се зареждат значително дълго. В същото време едва ли се забелязва, че той губи толкова много от интегрираното Helvetica / Roboto. Помислете добре, дали си струва допълнително време за зареждане на потребителския ви шрифт.

Размери и резолюции на мобилни устройства. Разликата между физическата разделителна способност на екрана и резолюцията в мобилния браузър

IPhone и iPad използват идеята за точки - ябълкови точки. Разделителна способност на IPhone до 5 модела - 320 на 480 пиксела. Какво представлява Retina Display? Retina Display използва двойна плътност на пикселите, т.е. има 4 физически пиксела на точка. И така, iPhone 4 има физическа резолюция на дисплея от 640 на 960 пиксела, все още 320 на 480 пиксела. Но в същото време графиките са по-подробни поради използването на два пъти големи изображения в приложенията. За iPhone 5 стойността в точките нараства от 480 на 568. За iPad, всички версии, включително Mini, винаги са 1024x768.

По подразбиране, скалата от 1 до 1 стандартна графика в мрежата (например, background-image) ще бъде показана в вид на двойна форма, като един пиксел от растерното изображение ще бъде разтегнат с 4 пиксела от физическия екран. Как да се използват графики с висока разделителна способност в тази ситуация ще бъдат обсъдени в следващия раздел. Основното нещо, което трябва да запомните за разрешенията на IOS устройствата - не мисля, че страниците в ретината и не-ретината имат различни ширини. Не, разликата е само в плътност на пикселите, пропорциите са абсолютно еднакви.

В Android, ситуацията е много по-сложна, по-точно, по-разнообразна. Android използва концепцията за различни плътности на екрана (DPI). Нейната същност е, че при различни физически размери на дисплея и разделителната способност, моделът на поведение на точки се различава в зависимост от предназначението на устройството. Аналог на точките е гореспоменатият DIP.

Плътността на екрана е 1. Тази категория включва много устройства, като 320x480 телефони (HTC Hero, LG Optimus One), 7-инчови таблетки 1024x600 (Samsung Galaxy Tab, Kindle Fire), 10-инчови таблетки (Asus Transformer, Acer A500, Galaxy Tab 10'1).

Плътността на екрана от 1.33 се използва в 7-инчови таблетки като Nexus 7. Физическата разделителна способност е 1280x800, а в DIP е 960x600.

Гъстотата на екрана е 1,5 - високите цени на мобилните телефони от 2011 г. и средната стойност за 2012 г., 10-инчовите таблети с FullHD. Например, Nexus One 480x800 пиксела, 360x533 * DIP, HTC One S - 540x960 пиксела, 360x640 DIP и Asus Transformer Pad Infinity 1920x1200 пиксела, 1280x800 DIP.

* На разработчиците на Android е намерен 534, но измерването на ширината на браузъра чрез JS показва точно 533, съответно, и в медийните запитвания си струва да се фокусира върху тази цифра.

Плътността на екрана 2 - телефони с висока ценова категория на 2012 г. и буквално няколко таблетки. Например, HTC One X, Samsung Galaxy S3 - разделителната способност на екрана е 1280x720, размери в DIP 360x640. Google Tablet Nexus 10 - резолюция 2560x1600 пиксела, 1280x800 DIP.

Плътност на екрана 3 - флагмани на 2013 с FullHD дисплей. С резолюция от 1920x1080 пиксела, те все още имат един и същ 360x640 DIP.

За всичко това все още има разсеян Google Nexus 4 с екран от 1280x768 пиксела с плътност 2 (384x640). В моделите с екранни клавиши 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) платно и използвайте размери, които са кратни на две. Всички графики, всички шрифтове трябва да бъдат такива.

Лентата на състоянието със сигнални индикатори, батерии и т.н. може да заема определена част от екрана в бъдещото ви приложение. Това са 20 точки в iOS и 25 DIP в Android. В андроид телефони с меки клавиши и 48 DIP таблетки в долната част на екрана, за тях е необходима матрица (лента за навигация). В същото време, в не-канонични устройства като таблети Samsung, поради използването на оригиналната обвивка, лентата за навигация и лентата на състоянието са комбинирани.

За приложение за телефони с Android е важно да вземете хост от поне 720x1280. По-добре е само 1080х1960, базирани на модерни флагмани.

За платно от 720x1280, размерите трябва да бъдат кратни на две, за 1080x1960, кратно на три. Използването на 480x800 или 640x960 като платно е много лоша идея.

В процеса на работа по оформлението трябва периодично да намалявате размера на прозореца на графичния редактор до приблизителния размер на реалното устройство, както и да записвате JPG и да го преглеждате на реалното устройство. Възможно ли е да получите пръст на бутона? Текстът не е ли твърде малък?

Използвайки оформление с неподходящ размер, вината за външния вид на приложението или предназначената за нея графика ще бъде изцяло върху вас.

Като цяло, бъдете внимателни към детайлите и помнете - пикселите и точките / дипи не са едно и също нещо.

Оптимизирайте уеб графиките за екрани с висока плътност

Така научихме, че има няколко възможни опции за плътността на пикселите на дисплея. Следователно, за да се избегне ефекта на размазани графики, известен още като "Playstation ефект", трябва да използваме растерна графика с по-висока разделителна способност или векторна графика, като SVG.

В същото време, поддръжката на SVG все още е много ограничена и за обратната съвместимост със старите браузъри ще трябва да използвате растер. Друго главоболие ще бъде използването на спрайтове - стойностите на фоновото положение ще трябва да бъдат посочени в проценти, което ще изисква големи математически изчисления. Най-трудният начин е да се използват няколко варианта на едни и същи изображения чрез медиен въпрос, например -webkit-min-device-pixel-ratio: 2.

Както можете да видите, самата техника е много проста и изисква само наличието на няколко версии на една и съща картина, ако се използва като фон-образ. Редовните изображения, ако е необходимо, могат да бъдат заредени два пъти по-големи, тъй като трябва да бъдат по размер и да предпишат желания размер на страницата чрез атрибута на стила.

Недостатъкът всъщност е по-голямото тегло на изображенията с висока резолюция. Тук трябва да решите кое е по-важно - съдържанието, което потребителят ще види след по-дълъг период от време поради тежестта на страницата или дизайна.

Поздрави, случайни посетители и редовни читатели на блога!

Преди време актуализирах блога си, създавайки напълно нова тема за WordPress от нулата. За това как се е случило това, написах в статията "". Една от основните задачи при създаването на нов шаблон е адаптивното оформление на сайта за всички разделителни способности на екрана.

Кратко описание на статията:

В предишната статия вече писах за това и защо е необходимо. Но как да постигнем тази много адаптивност?

За това има различни начини. Някой използва javascript, някой друг. Но мисля, че най-лесният и правилен начин е адаптивен с CSS.

Как да направите отзивчив сайт оформление

На първо място,   ако излезете с отзивчив уебсайт дизайн, между етикети   Поставете следния код:

Какъв глупак бях, че не го направих веднага, когато се опитах да направя адаптивно оформление на сайта !!!
  Проблемът с мобилните браузъри в тяхното мащабиране, дори адаптивно.

Представете си, че рисувам дизайн, след това регистрирам всички необходими стилове и заявки, проверявам адаптивността на сайта при различни резолюции. Всичко изглежда добре! Но когато отворя блога си на смартфон, виждам, че сайтът просто се свива. Той не се адаптира към мобилното устройство, а просто намалява размера на шрифта, снимките и т.н.

Как така? Започнах да проверявам отново всички стилове, ако регистрирах правилно класовете, накрая стигнах до точката, че чрез javascript проверих ширината на прозореца на браузъра в px. Бях шокирана. При проверка на лаптоп получих резултата от 1024px, а за същия резултат получих и отварянето на сайта на смартфона!

Но това не може да бъде!

Оказва се ако не регистрирате кода, споменат по-горе, мобилният браузър не разбира, че сайтът е адаптивен  и се опитва просто да намали страницата на сайта, така че да се впише в малкия екран на мобилния телефон.

Заради глупостта и некомпетентността си загубих много време. Но сега си спомням завинаги))).

Искания за CSS медии за адаптивно оформление

  За да може да реагира с CSS, трябва да използвате медийни заявки.

Какво е това? Да, много проста. В CSS файла трябва да регистрирате заявки като:

   @ media screen и (min-width: 1440px) и (max-width: 1599px) ()

Този код означава, че стиловете, затворени между “()” ще работят за екрани с минимална ширина 1440px и максимум 1599px.

Тоест, стиловете на елементите на сайта, които трябва да бъдат адаптирани в зависимост от разделителната способност на екрана, трябва да бъдат изписани поотделно за всяка възможна ширина на екрана.

Най-важната резолюция на екрана при адаптивно оформление

• 320 px  - Мобилни устройства (портретна ориентация);
• 480 px  - мобилни устройства (пейзажна ориентация);
• 600 px  - Малки таблетки;
• 768 px  - Таблетки (портретна ориентация);
• 1024 пиксела  - Таблети (пейзажна ориентация) / Нетбуци;
• 1280 px и повече  - PC.

На тези разрешения трябва да се постави акцентът и да им се обърне специално внимание в адаптивното оформление. Това са най-често срещаните видове разделителни способности на екрана.

реагиращ дизайн на bootstrap

  Много е удобно да се използва за създаване на адаптивна схема за първоначално зареждане. Удобството е, че всички стилове за адаптиране на блокове, бутони, таблици и т.н. вече е написано в bootstpap. Просто трябва да разберете кой клас да зададете на кой елемент.

За да започнете, изтеглете най-новата версия на първоначалното зареждане и го свържете към сайта си. Имайте предвид, че свързването на стилове и скриптове към wordpress има свои характеристики.

Оформлението в bootstrap е различно, тъй като ширината на блока или екрана е разделена на 12 равни части. И присвояване на определен клас на блок, можете да зададете ширината на блока, равна на желания брой части.

Например, този дизайн ще ви позволи да изберете един широк блок за съдържание с ширина от 8 части и една тясна за страничната лента с ширина от 4 части на екрана:

Ширината на блоковете се изчислява автоматично в зависимост от ширината на екрана. И когато се гледат на мобилно устройство, тези блокове ще се движат един под друг.

Можете също да регулирате отстъпа на блока от ръба, отново, до желания брой части. Например такава конструкция:

Блок с ширина от 10 части ще бъде създаден с отстъп лева в 1 част на екрана.

Ако го разберете, тогава работата с bootstrap ще работи много бързо. Какво прави тези стилове точно работят правилно и няма да има нищо криво на сайта.

В бъдеще планирам да изложа няколко урока за работа с ботушите. Затова ви съветвам да не пропускате този момент.

Проверка за адаптивност на сайта

  Но възниква въпросът: как да се провери адаптивността на сайта? Тук са предписани медийни заявки в CSS, закачен bootstrap и използване на необходимите класове. И как да проверите дали сайтът се адаптира правилно при всички разделителни способности на екрана?

Много точна и най-важното безплатна услуга, която заслужава уважение и благодарност от уебмастъри и уеб дизайнери, които се занимават с адаптивно оформление на сайтове.

Как ви харесва статията? Ясно ли е всичко? Ако не, напишете в коментарите, ще разберем заедно.

Да, за да създадете отзивчив уеб сайт, трябва да работите усилено. Но тези произведения ще бъдат възнаградени с благоприятно отношение към търсачките на сайта Ви и най-важните посетители на сайта Ви.

Една от основните параметри на всеки смартфон е резолюцията на екрана. Нека видим какво е и защо е толкова важно.

Каква е разделителната способност на екрана?

Разделителната способност на дисплея е стойност, която показва броя на пикселите на дисплея по дължина и ширина. Този параметър е важен, защото определя яснотата на изображението на всеки смартфон.

Разделителната способност на екрана влияе върху качеството на изображението. Колкото е по-голямо, толкова по-добре и по-ясно ще бъде изображението. Ако устройството има големи размери, но с малка разделителна способност, тогава пикселите ще се виждат на изображението. Числата и символите ще изглеждат недостатъчно ясни и в редки случаи тромави, като на стари бутони.

В момента 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 е характеристика на бъдещето, тя е необходима за технологии на увеличена и виртуална реалност.