Мобильная версия веб-сайта увеличена по умолчанию

Если вы зайдете на мой сайт через мобильное устройство (или, по крайней мере, iphone, я не смог проверить любое другое устройство) www.oxynergy.com, вы заметите, что каждый раз, когда вы открываете любую страницу, она ПРОСТО немного увеличена, вы можете ущипнуть экран и уменьшить масштаб, но так не должно быть. Я проверил мету области просмотра, и, насколько я понимаю, она работает нормально, может ли кто-нибудь помочь мне с этим?

Это мета вьюпорта прямо сейчас:

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

Спасибо


mobile responsive meta viewport
person Andres Molina Perez-Tome    schedule 02.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ширина вашего макета равна ширине устройства, но на вашей странице есть элементы, которые шире этого, поэтому браузер позволяет вам уменьшить масштаб.

В вашем случае в вашем <footer> есть <div class="row visible-xs">. Это отрицательные поля, которые заставляют поле расширяться до ширины, превышающей 100% содержащего блока. Точно так же class=vc_row в вашем class=container имеют ту же проблему. Удаление стилей margin-left|right на .vc_row и .row устраняет проблему.

Я недостаточно хорошо разбираюсь в компоновке, чтобы знать, чего вы пытаетесь достичь или какой метод выбрать, но вам нужно сделать это, не заставляя эти блоки становиться шире, чем 100% контейнера. В противном случае у вас будет контент, который шире ширины экрана и позволит уменьшить масштаб. Если вы просто установите минимальный масштаб, его все равно можно будет прокрутить (хотя я полагаю, вы могли бы установить overflow-x: hidden, но это просто маскирует проблему).

person David Bokan    schedule 02.12.2016
comment
Вы самый лучший человек! В этом была проблема. Теперь я столкнулся с проблемой css, которую я попытаюсь исправить сам, но это решило мою проблему. - person Andres Molina Perez-Tome; 03.12.2016