Адаптивная верстка не отображается во всю ширину экрана телефона, в чем дело?

Question

[Дима]

Сам медиа-запрос срабатывает, но верстка выходит за границы экрана. Делал на max-width: 640px, тестирую с iPhone SE.

В чем может быть проблема? Заранее спасибо за ответы.

Answer 1

[iBird Rose]

у тебя для body задается min-width: 640px; понятное дело что он ниже 640 не может уменьшиться.

Comments

[Дима]

Какое значение тогда лучше поставить и почему?

[Сергей Горячев]

Дима Волков: 320, потому что это нормальная ширина смартфонов. А еще лучше вообще отказаться от этого min-width

[Дима]

Sergey Goryachev: убрал, но проблема не исчезла

[Сергей Горячев]

Дима Волков:

body {
    font-family: "HelveticaRegular","Arial",sans-serif;
    margin: 0;
    padding: 0;
    min-width: 1200px;
    position: relative;
    z-index: 10;
}

Не знаю, что ты там убрал)

[Сергей Горячев]

Дима Волков:

.shipping-info__help-feedback {
    width: 550px;
    height: 60px;
    margin-bottom: 50px;
}

Вот тут нужна max-width 590 и width 100%.

[Сергей Горячев]

Дима Волков: Яндекс карта тоже имеет 550, нужно изменить.
Тогда сайт будет перестраиваться, и тебе нужно переделывать косяки с перестройкой.

[Дима]

Sergey Goryachev: вроде помогло, спасибо за советы!

[Сергей Горячев]

Дима Волков: Не забудь отметить решением ответ) Тут принято так :)

[Дима]

Sergey Goryachev: я б ответил твой ответ, но не могу, так как это комментарий

[Сергей Горячев]

Дима Волков: Так и не надо мой, тебе помогли выше, я просто внес остальную ясность) Правильный ответ выше)

[Дима]

Sergey Goryachev: заметил такую деталь, что если задать любому элементу ширину больше 300px то он выходит за границы видимой области, хотя разрешение устройства 640px, с чем это связано?

[Сергей Горячев]

Дима Волков: Если вы про телефон, то разрешение экрана у них обычно 320, вы путаете разрешения. Есть физические пиксели, которые на экранах повышенной плотности в 2 раза выше, а есть CSS пиксели, на которые вам и нужно ориентироваться.
Советую внимательно изучить https://habrahabr.ru/post/150071/

[Дима]

Sergey Goryachev: понял, благодарю!