Почему на компьютере сайт в разрешении 540 пикселей выглядит нормально, а на мобильном устройстве словно увеличенный?

Question

[Fyodor]

на мобильном в ширину так же 540 пикселей. посмотрел всяческие viewport добавлял, убирал, эффекта нет.

в самом браузере никаких увеличений не включал, zoom пальцами не работает

почему так?

ссылка

Answer 1

[Виталий Киренков]

Убрать лишний viewport:

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

И привести к виду:

<meta name="viewport" content="user-scalable=no" />

Comments

[Fyodor]

Я не понял о чем вы, вторая строка сейчас есть в коде

[Виталий Киренков]

Откройте исходный код страницы и активно используйте сочетание клавиш CTRL + F -- > viewport

[Fyodor]

@DeLaVega увидел что дубликат. оставил только вторую строку, ничего не изменилось.

[Виталий Киренков]

Ну логично!!! Оно же приоритетней. Включите пожалуйста хоть чуть-чуть мозг.
user-scalable=no - вот фрагмент который отвечает за зум пальцами.
width=device-width, - вот ширина! соответственно ширина моб устройства порядка 320px, а контент у вас 540 вот и не влазит.

[Fyodor]

@DeLaVega вы научитесь изъясняться нормально. ширина моб устройства у меня 540, о чем я написал в тексте вопроса. т.е. и там и там кол-во пикселей в ширину одинаковое. скрин как это выглядит при одинаковой ширине в 540 пикселей я приложил так же.

[Fyodor]

@DeLaVega зум пальцами и не должен работать. я это написал к тому что это не я увеличил сайт случайно.

[Виталий Киренков]

Уберите просто все параметры, кроме user-scalable, по идее будет вам счастье.

[Fyodor]

@DeLaVega да, спасибо, оставил. на айфоне шрифты странно выглядят в одном месте правда.

[Виталий Киренков]

Ну, это уже другой вопрос...
Просто в догонку ещё скажу, что у вас при подключении стилей повторяющийся рел.

[Fyodor]

@DeLaVega да, спасибо, намусорил пока с zoom возился. переделал блок где шрифты вылазили, сейчас вроде бы все ок.

[Виталий Киренков]

@Richard_Ferlow Изменил ответ под корректное решение.

[Fyodor]

@DeLaVega так как мне нужно стало отображаться только при width=device-width при этом возможность zoom я решил не убирать. если использовать так как сейчас в ответе, то сайт открывается по-умолчанию вообще уменьшенным.

[Виталий Киренков]

@Richard_Ferlow Знаете, вы постоянно меняете своё мнение, это плохое качество, даже чисто человеческое, не говоря уже о технических вопросах.

[Fyodor]

@DeLaVega нет. у меня изначальная проблема была что сайт открывается увеличенным. на это влияли -scale параметры - их задавал и сайт увеличенным был. оставляю только user-scalable=no - сайт открывается уменьшенным. решение вопроса который я изначально озвучил - width=device-width. и убирать возможность зума или нет это уже вторичный вопрос.

Answer 2

[Сергей Мельников]

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

Comments

[Fyodor]

так уменьшить уже пальцами можно, что логично. однако при открытии почему-то сайт все равно увеличенным открывается.

Answer 3

[rrd]

@media screen and (max-device-width: 540px) {
  body {
    -webkit-text-size-adjust: none;
  }
}