Повноцінний адаптивний дизайн передбачає окремий макет, який комфортно моніторити на екранах невеликого розширення. Проте першим кроком до адаптації Ваших сайтів є наявність метатегу viewport.
Метатег viewport виводиться між тегами <head></head> і допомагає браузерам оптимальніше змасштабувати вигляд сайту на мобільних екранах.
<meta name="viewport" content="width=device-width">
Наведемо стандартний приклад. Для початку виведемо банальний напис Hello world у стандартному html-документі.
<!doctype html> <html> <head> <title>Hello world!</title> </head> <body> <p>Hello world!</p> </body> </html>
Відкрита в звичайному браузері, сторінка відображатиметься як належить.
Проте вже в мобільному емуляторі ми побачимо що текст занадто малий і потребує ручного збільшення…
Не вдаючись в особливі деталі, скажу, що відбувається так, оскільки мобільний намагається відобразити сторінку так як би він уявляв її розмір на реальному екрані. Метатег viewport, а зокрема параметр device-width дозволяють мобільному не думати, “що скажуть люди”, а інтерпретувати зображення сайту, відштовхуючись від власних розмірів.
За браком часу не стану розписувати даний матеріал. Обмежимося тим мінімумом, який повинен знати вебмайстер. Лиш на останок залишу тут таблицю параметрів для цього метатегу.
Атрибут | Возможное значение | Описание |
---|---|---|
width | Ціле, невід’ємне значення (от 200px — 10,000px) або ж константа device-width. |
Визначає ширину viewport. Якщо ж ширина не вказана, то в мобільному Safari задається 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px. |
height | Ціле, невід’ємне значення (от 223px до 10,000px) або ж константа deviceheight |
Визначає висоту viewport. В більшості випадків цей атрибут не актуальний, оскільки висота задається контентом сторінки |
initial-scale | Число с точкою (комою) (від 0.1 до 10). Якщо виставити значення 1.0 — масштабувати не буде |
Визначає початковий масштаб сторінки. При чому, чим більше число, тим більший масштаб |
user-scalable | no або yes | Визначає, чи може користувач власноручно масштабувати сторінку. Дефолтне значення: “yes” в мобільному Safari. |
minimum-scale | Число с точкою (від 0.1 до 10). 1.0 — не масштабуватиме |
Визначає мінімальний масштаб viewport. Дефолтне значення: “0.25” в мобільному Safari. |
maximum-scale | Число с точкою (від 0.1 до 10). 1.0 — не масштабуватиме |
Визначає максимальний масштаб viewport. Дефолтне значення: “1.6” в мобільному Safari. |
Нажаль, viewport дозволяє лише масштабувати сторінку. Для створення повноцінної мобільної версії використовуйте @media.
До речі, якраз маю собі записано питання про адаптивність дизайну під різні розміри екрану та про кросбраузерність, тому дякую. Заходила на свій сайт з телефону, то все виглядало нормально, окрім логотипу, який був завеликий для цього екрану і перекривав навіть надписи.
Яке тут може бути вирішення?
Я так розумію, що картинка має свій розмір, певну кількість пікселів у висоту та ширину, от вони і відображаються.
Власне, тут ще залежить від зазначених властивостей об’єкту. Якщо на малюнку, або на батьківському діві буде виставлена ширина в 40-50%, наприклад
width: 40%;
, то обєкт буде займати півсторінки.Правиться це введенням додаткових параметрів для менших екранів через правило @media.
в css записуємо ось таку конструкці. і між фігурними дужками зазначаємо властивість потрібного об’єкту.