Адаптивная верстка. Нужна помощь. Почему на телефоне отображается не так как в браузере с ПК?

Question

[Valentine]

Подскажите пожалуйста с адаптивной версткой при помощи медиазапросов. В браузере при ширине 460px - все отображается отлично,



на телефоне же с разрешением экрана - 480px - все плохо

это при стандартной загрузке


это при уменьшении масштаба

Answer 1

[mr_dev1l]

в меди запросе укажите не просто max-width, а max-device-width
и посмотрите какой у вас viewport:

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

Comments

[Valentine]

Спасибо, но мало что изменилось(

[mr_dev1l]

Valentine: можете сайт скинуть посмотреть? может у вас там фиксированные размеры в px стоят где-то

[Valentine]

mr_dev1l: Да, могу. Только он еще в очень сырой версии. Там много где фиксированные стоят, но они не превышают даже 460px. Линка достаточно будет? b-q-b.com

Answer 2

[Wheelie]

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

Comments

[Valentine]

Так было изначально

Answer 3

[Роман Тюрин]

Попробуй так: media (max-width:480px) {
input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}

Comments

[Роман Тюрин]

media c собачкой

[Ivanq]

Roman-T: Он и написал с собакой, это все тостопарсер. Юзер такой есть - media. Вот почему я так люблю code.

Answer 4

[Valentine]

Я так и не разобрался до сих пор. Может подскажет кто-то еще?