- Давайте розглянемо типово-епічно верстку сайту:
- html
- Дуже поширеним варіантом є:
- Також часто використовується наступний варіант:
- width
- height
- initial-scale
- user-scalable
- minimum-scale і maximum-scale
Наша взаимовыгодная связь https://banwar.org/
Так уже склалося, що мобільні браузери з'явилися порівняно недавно, а сайтів в мережі на той час вже була величезна кількість. Природно, всі ці сайти зовсім були оптимізовані під маленькі екрани смартфонів, а смартфони в свою чергу, змушені були думати, що всі сайти в ширину займають десь близько 1000px (980px в сафарі). Потрібно було якось вирішувати ситуацію, що склалася і в apple придумали метатег <meta name = "viewport">, який за традицією потім сперли все решта виробників браузерів.
Давайте розглянемо типово-епічно верстку сайту:
html
<! DOCTYPE html> <html> <head> <title> Hello world </ title> </ head> <body> <p> Hello world </ p> </ body> </ html>
Відкриємо його в мобільному браузері. Ось що ми побачимо:
Як ви правильно помітили, текст занадто дрібний і сталося це тому, що сафарі спробував вмістити наш сайт (який за його припущенням зроблений для браузерів з шириною екрану близько 980pх)
Давайте тепер повідомимо браузеру, що наш сайт адаптований для будь-якої ширини екрану.
html
<Meta name = "viewport" content = "width = device-width">
Що вийшло:
Ну ось, тепер все набагато краще. Позначивши width = device-width, ми сказали браузеру, що нам потрібна область перегляду контенту, що дорівнює ширині екрану мобільного пристрою.
Можна вручну задати значення для width. Наприклад content = "width = 320px", але цього не рекомендується робити, тому-що різні смартфони можуть мати абсолютно різну ширину екрану.
Дуже поширеним варіантом є:
html
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
такий варіант задає ширину сторінки і початковий масштаб (в даному випадку без масштабування)
Також часто використовується наступний варіант:
html
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
Такі значення використовують у разі, якщо сайт буде використовуватися і функціонувати як мобільний додаток. тобто
- при завантаженні сторінки вона не буде смасштабірована
- сторінка займе всю ширину мобільного браузера
- заборонено будь-яке призначене для користувача масштабування
- доступний тільки горизонтальний і вертикальний скрол
Використовуйте цю конфігурціі, тільки в тому випадку, якщо знаєте, що робите.
width
Ціле число (від 200px - 10,000px) або "device-width".
Задає ширину viewport. Якщо ніріна viewport не вказана, то:
- для мобільного Safari це 980px
- Opera - 850px
- Android WebKit - 800px
- IE - 974px
height
Ціле число (від 223px до 10,000px) або "device-height"
задає висоту viewport. 99% випадків, просто не звертайте уваги на цей параметр, але якщо сильно треба - пробуйте і експериментуйте. Хай щастить..
initial-scale
Доступні значення (від 0.1 до 10).
1.0 - НЕ масштабувати. Задає масштаб сторінки. Збільшуємо значення - збільшуємо масштаб.
user-scalable
Доступні значення no або yes
Задає возможнось зміни масштабу сторінки. За замовчуванням встановлено як yes в Safari.
minimum-scale і maximum-scale
Доступні значення (від 0.1 до 10).
1.0 - НЕ масштабувати. Визначає мінімальний і максимальний масштаб viewport відповідно.
За замовчуванням в мобільному Safari minimum-scale = "0.25", maximum-scale = "1.6".
Порада: Не використовуйте мета-теги (в тому числі і цей), поки не розібралися, навіщо все це потрібно. І тестируйте все в різних мобільних браузерах. Успіхів!
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
