1 Topic by PunBB

Topic: META TAG viewport, масштабирование веб страниц в мобильных браузерах

Мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать, что все сайты в ширину занимают где-то около 1000px (980px в сафари). Нужно было как-то решать сложившуюся ситуацию и в apple придумали метатег <meta name="viewport">, который по традиции потом сперли все остальные производители браузеров.

Самым распространенным является тег

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2 Reply by PunBB

Re: META TAG viewport, масштабирование веб страниц в мобильных браузерах

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

при загрузке страницы она не будет смасштабирована
страница займет всю ширину мобильного браузера
запрещено любое пользовательское масштабирование
доступен только горизонтальный и вертикальный скролл

Проверить работоспособность обычно можно на ПК, сжимая и растягивая окно браузера. Текст должен автоматически подстраиваться под ширину экрана.