Адаптивная верстка и проблема с масштабированием (viewport)

87

Alex-m0sk

8 февраля 2015, 13:07

3351

Сайт одинаково масштабировался "по ширине" во всех настольных и моб. браузерах, т.е. растягивался по всей ширине, не вызывая прокрутку или потребность в мультитач.

Сейчас добавил в хед тег <meta name="viewport" content="width=device-width" />

и в CSS стили для адаптации под моб. устройства: @media (max-width:480px) { ... }

В итоге, сама адаптация работает, НО! В моб. браузерах Firefox, Opera Mini, встроенных теперь сайт растягивается раза в 2, появляется потребность его сузить пальцами. При этом на тех же устройствах Андроид в браузерах Chrome или Opera Mobile как и надо сайт подстраивается под ширину.

Если убрать метатег viewport, все опять становится ок - по ширине, однако перестает работать адаптация.

Как заставить viewport одинаково масштабировать под ширину всех браузеров? У др. адаптивных сайтов все нормально, у моего - вот так.

119

vlad00777

8 февраля 2015, 19:03

#1

А если так?

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.

AM

87

Alex-m0sk

8 февраля 2015, 20:24

#2

vlad00777:
А если так?
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=950">

Нет, так даже на моем 4,7-дюймовом смартфоне все как на декстопе снова стало.

Более-менее помогла такая комбинация:

Но! Я уже запарился. При этом на смарте моем адаптация вертикально работает, горизонтально отменяется. А у друга на 5-дюймовом андроиде и 5-м афоне не работает, за исключением браузера Сафари. В нем одна наоборот включается при обеих раскладках экрана. На айпаде аналогично. А у него какой разрешение-то! В Сафари включается адаптация при обоих положениях экрана. У меня же в стилях прописана макс. ширина 480px, что куда меньше. В общем, я не вижу никакой логики и закономерности.

Все что нужно знать о DDоS-атаках грамотному менеджеру

VK приобрела 70% в структуре компании-разработчика red_mad_robot