Найпопулярніше розширення екрану. Дозвіл екрану смартфона: яке вибрати

Вітаю вас, випадкові відвідувачі та постійні читачі блогу сайт!

Деякий час назад я оновив свій блог, створивши з нуля повністю тему для wordpress. Про те як це сталося я писав у статті "". Одна з головних задач при створенні нового шаблону - це адаптивна верстка сайту під всі дозволи екрану.

Короткий план статті:

У попередній статті я вже писав про те, і навіщо він потрібен. Але як досягти цієї самої адаптивності?

Для цього є різні способи. Хто то використовує javascript, хто то що то ще. Але я вважаю, що найпростіший і правильний спосіб - це адаптивна за допомогою CSS.

Як зробити адаптивну верстку сайту

По перше,   якщо ви взялися верстати адаптивний дизайн сайту, між тегами   вставте наступний код:

Який я був дурень, що не зробив цього відразу, коли намагався зробити адаптивну верстку сайту !!!
  Проблема мобільних браузерів в їх масштабування верстки сайту, навіть адаптивної.

Уявіть собі, я малюю дизайн, потім прописую все потрібні стилі та запити, перевіряю адаптивність сайту при різних дозволах. Все начебто добре! Але, коли я відкриваю свій блог на смартфоні, я бачу, що сайт просто напросто стиснувся. Він не адаптувався до мобільного пристрою, а просто зменшилися розміри шрифту, картинок і т.д.

Як так? Я став перевіряти всі стилі, чи правильно я прописав класи, в результаті дійшов до того, що через javascript перевірив ширину вікна браузера в px. Я був у шоці. При перевірці на ноутбуці я отримав результат 1024px, і приблизно такий же результат я отримав відкривши сайт на смартфоні!

Але ж цього не може бути!

виявляється, якщо не прописати код, який я вказав вище, мобільний браузер не розуміє, що сайт адаптивний  і намагається просто зменшити сторінку сайту, щоб вона влізла в маленький екран мобільника.

Через свою дурість і некомпетентність я втратив дуже багато часу. Зате тепер запам'ятав назавжди))).

Адаптивна верстка CSS media запити

  Щоб зробити адаптивну за допомогою CSS, необхідно використовувати media запити.

Це як? Так, дуже просто. В CSS файлі потрібно прописати запити типу:

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

Це код означає, що стилі укладені між «()» працюватимуть для екранів з мінімальною шириною 1440px і максимальної 1599px.

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

Найважливіші дозволу екрану, при адаптивної верстці

• 320 px  - Мобільні пристрої (портретна орієнтація);
• 480 px  - Мобільні пристрої (альбомна орієнтація);
• 600 px  - Невеликі планшети;
• 768 px  - Планшети (портретна орієнтація);
• 1024 px  - Планшети (альбомна орієнтація) / Нетбуки;
• 1 280 px і більш  - PC.

Саме на ці дозволи і потрібно робити упор і приділяти їм особливу увагу при адаптивної верстці. Це найпоширеніші види дозволів екранів.

bootstrap адаптивний дизайн

Дуже зручно використовувати для створення адаптивної верстки bootstrap. Зручність у тому, що всі стилі для адаптації блоків, кнопок, таблиць і т.д. вже прописані в bootstpap. Потрібно тільки розібратися який клас до якого елементу привласнити.

Для початку, качайте свіжу версію bootstrap і підключіть його до свого сайту. Врахуйте, що підключення стилів і скриптів до wordpress має свої особливості.

Верстка на bootstrap відрізняється тим, що ширина блоку або екрану ділиться на 12 рівних частин. І привласнюючи певний клас блоку, можна задати ширину блоку рівній потрібній кількості частин.

Наприклад, така конструкція дозволить виділити один широкий блок для контенту шириною в 8 частин і один вузький для сайдбара шириною в 4 частині екрана:

Ширина блоків буде розраховуватися автоматично в залежності від ширини екрану. А при перегляді на мобільному пристрої ці блоки будуть зміщуватися один під одного.

Також можна регулювати відступ блок від краю, знову ж таки, на потрібну кількість частин. Наприклад така конструкція:

Буде створено блок шириною в 10 частин з відступом зліва в 1 частина екрану.

Якщо розібратися, то робота з бутстрап робить роботу з дуже швидкою. При чому ці стилі точно працюють коректно і не буде нічого кривого на сайті.

В майбутньому я планую викласти кілька уроків по роботі з bootsrap. Тому раджу, щоб не упустити цей момент.

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

  Але виникає питання: як перевіряти адаптивність сайту? Ось прописали ви media запити в CSS, підключили bootstrap і використовуєте потрібні класи. А як ви перевірите, що на всіх дозволах екрану сайт правильно адаптується.

Дуже точний і головне безкоштовний сервіс, який заслуговує повагу і подяки від веб-майстрів і верстальників, які займаються адаптивної версткою сайтів.

Ну як вам стаття? Все зрозуміло? Якщо немає, пишіть в коментарі, будемо розбиратися разом.

Так, щоб зробити адаптивний дизайн сайту, потрібно добре попрацювати. Але ці праці винагородяться прихильним ставленням до вашого сайту пошукових систем, і найголовніше відвідувачів вашого сайту.

Технічні журналісти вже не перше рік кричать про еру пост-PC, продажу комп'ютерів традиційних форм-факторів невблаганно падають, як і акції їх виробників. Зате кількість мобільних пристроїв, смартфонів або планшетів, неухильно зростає.

Для дизайнера це означає перш за все те, що є в ТЗ хоч щось про мобільні пристрої чи ні, він повинен намалювати макет так, що б з телефону (і, поготів, планшета) сайтом можна було користуватися. І це значить не тільки те, що по кнопках має бути можливо потрапити пальцем. В ідеалі, звичайно, у сайту повинна бути окрема мобільна версія, Але, як показує наш досвід, більшість клієнтів не хоче виділяти на неї додаткові кошти, але неодмінно будуть скаржитися, якщо у них що-небудь не працює з його улюбленого яблучного дивайса.

Згадуючи ті граблі, на які наступали знайомі мені дизайнери, перше, що викликає проблеми з намальованими ними макетами - це відсутність точних уявлень про те, скільки ж пікселів влізе на екран з номінальним дозволом вище, ніж у настільного 20 'монітора. Ну що ж, нічого страшного, на це і був розрахований маркетинг великих чисел. Ця стаття допоможе розібратися в ситуації, що склалася.

Йдеться про пристрої на 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 (фізична роздільна здатність 1280х800).

Які варто зробити висновки? Незважаючи на велику кількість широкоформатних дисплеїв в настільних ПК і ноутбуках, стара добра сітка на 960 пікселів не втратила свою актуальність. Мобільні браузери мають так само властивість підганяти текстові блоки в формат, зручно читається на пристрої, наприклад, підтискати текст у вузький стовпець на телефоні і збільшувати його шрифт. Це не вийде, якщо містить блок текст жорстко обмежений по висоті. Насправді, взагалі ніколи не варто робити сайт, де що-небудь обмежена по висоті, особливо якщо плануються відвідувачі з мобільних пристроїв. Ще один ворог мобільних пристроїв, особливо - телефонів - це елементи з position: fixed. Наприклад, модна нині кнопка назад, наполегливо бігає за користувачем по сторінці. Ще гірше - великі плашки, на кшталт фіксованою шапки. Такі елементи не тільки займають корисну площу на малому екрані, але і залишаються на колишньому місці при збільшенні. Проблема характерна також для модальних вікон. Якщо вони відображаються посередині екрану, то з мобільника збільшення їх вмісту вимагає неабиякої спритності. Використання попап на кшталт "будь на зв'язку з нами в соціальних мережах! ", Які поводяться подібним чином - взагалі люте неповагу до користувачів мобільних пристроїв, тому що найчастіше покинути сайт простіше, ніж закрити цей попап.

Розглянемо на прикладі парочки сайтів.

Не дивлячись на те, що лента.ру має дуже пристойну мобільну версію, автоматичний перехід на неї не проводиться. У настільної fixed-меню залазить на текст при автоматичному масштабуванні. Перед користувачем постає вибір або масштабувати руками, або не полінуватися прописати m. в url.

РБК. Взагалі у них теж є мобільна версія, але перехід на неї здійснюється тільки з головної сторінки. За прямим посиланням (з Google News, зокрема) можна спостерігати це нечитабельне полотно. Затримається відвідувач на такому сайті? Ледве.

Суперканоніческій поїхав попап на РБК-стайл. Видатний приклад того, як робити не треба.

Интан, який верстав вгадайте хто. Я, зрозуміло, прекрасно розумів, чому не можна так поступати з меню, але якось не було настрою сперечатися. Задати питання взагалі не в тему.

Ще одна штука, яка зазвичай не виправдовує витрати часу в настільному вигляді і викликає проблеми в мобільному - це кастомниє елементи форм. Те, що засобами CSS вони майже не настроюються, вийшло не просто тому, що консорціуму всесвітньої павутини було лінь.

Наприклад, ви намалювали красивий, що випадає. Припустимо, в настільному браузері він схожий на все інше, від відкривається при натисканні миші і прокручується її коліщатком. Але в мобільному робота з таким елементів у вас викличе великі проблеми. Якби select був стандартним, користувачеві показали б системне вікно з барабаном / списком, що випадає, в залежності від ОС.

А можливість прикріпити файл в iOS відсутня як така. І якщо стандартний вид кнопки натякне користувачеві, що вона відключена, то якась яскрава красива кнопка буде викликати відчуття того, що на вашому сайті щось не працює.

Звичайно, в ідеалі мобільний пристрій має бути визначено, і для мобільних пристроїв скрипти, спрямовані на зміну стандартного інтерфейсу, не повинні виконуватися.

Ще однією неприємною особливістю мобільних браузерів є те, що в даний час вони не кешируєтся підключаються шрифти. Той же PT Sans у всіх накресленнях, підключений з Google Web Fonts, вантажиться відчутно довго. При цьому навряд чи він так вже відчутно програє вбудованим Helvetica / Roboto. Добре подумайте, чи варто зайвий час завантаження вашого кастомними шрифту.

Розміри і дозволу екранів мобільних пристроїв. Різниця між фізичним дозволом екрану і дозволом в мобільному браузері

В 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, і чотири c половиною ландшафтних - 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.

Зворотною стороною є, власне, більшу вагу картинок з високою роздільною здатністю. Тут потрібно вирішити, що ж важливіше - контент, який користувач побачить через більший через вагу сторінки проміжок часу, або оформлення.