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

Question

[web-cat]

Делаю адаптивную верстку, но телефоны подстраивают ее совсем не так, как хотелось бы. Например galaxy s3 "отдает" ширину экрана 360px, вместо реально в 720px. Из за этого макет выглядит очень крупно, некоторые элементы не входят на экран. Есть какие-то варианты заставить телефон с шириной экрана 720px показывать макет ширной 720px при этом что бы он входил на экран телефона, а не 360, как он показывает? Если нужен пример valvestudio.a1test.ru

Comments

[web-cat]

Грубо говоря на айфоне 4 страница выглядит вот так: i.imgur.com/JETbQnn.jpg
Слишком большой шрифт который не входит из за подстройки под 320px

А хотелось бы что бы выглядело как-то так:
i.imgur.com/DSViIIT.jpg
С подстройкой под реальное разрешение телефона

Answer 1

[Сергей Николаевич]

вьюпорт указан?

<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">

зачем указаны фиксированные размеры для boxFoot ?

Comments

[web-cat]

Да, указан, можно посмотреть на макете, не дает вставлять html в комментарий

[Сергей Николаевич]

тогда дело в pixel-ration наверно

[web-cat]

Указал viewport по вашему варианту. По pixel-ratio, похоже, что дело в нем. Можно ли как-то изменять ели изменять макет под него?

[Сергей Николаевич]

да, можно анализировать свойство window.devicePixelRatio и если оно = 2 то переписывать мету вьюпорта например вот так
width=device-width, maximum-scale=1, initial-scale=.5, minimum-scale=.5, user-scalable=no

[web-cat]

Спасибо, то что надо.