Почему происходит zoom-in страницы, несмотря на то, что для viewport установлено свойство initial-scale=1.0?

Question

[jekahm]

Доброго времени суток! В данный момент занимаюсь версткой адаптивного лендинга и столкнулся с такой проблемой. Если открыть данную страницу в браузере мобильного устройства, то страница при первой загрузке находится сразу в увеличенном состоянии, несмотря на то, что установлен следующий стнадартный вьюпорт:

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

И приходится её в ручную уменьшать.
Если же установить такой вьюпорт:

<meta name='viewport' content='width=device-width, maximum-scale=1.0'/>

то страница (линк) ведёт себе так, как нужно, и ширина подгоняется под ширину устройства (и при этом еще и масштабирование работает).
Буду очень признателен, если специалисты в данной сфере подскажут, почему именно так всё происходит, и в чем моя ошибка.
Заранее благодарен за ответ!

Comments

[Андрей]

Что в итоге сделали? У меня та же проблема

Answer 1

[BaffIt]

initial-scale - устанавливает масштабирование страницы при загрузке ( то есть initial-scale=1 говорит, что отрисовка страницы происходит без масштабирования). В Вашем случае верстка естественно не попадает в масштаб.

maximum-scale - Устанавливает максимальное масштабирование страницы. В Вашем случае initial-scale подбирается по ширине экрана.

По поводу масштабируемости - можете уточнить в каком именно браузере оно работает? В эмуляторах Chrome у меня мастштабирование не сработало.

Да, на Chrome для Android действительно выставляется initial-scale по ширине экрана. И масштабирование работает ровно до scale=1.

windows phone - при загрузке показал одинаковый результат - страница сразу увеличена, но с maximum-scale приблизить больше не даёт