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

Question

[Андрей]

Собственно суть вот в чем.
Есть сайт, отображается в браузере вот так:

На телефонах и планшетах блоки "лезут".

Нужно чтобы отображалось вот так:

<meta name="viewport" content="width=device-width" />

Не помогает.
Нужно чтоб сайт открывался почти во весь размер и уже юзер масштабировал пальцами :)

Answer 1

[Лучник *range attack +10*]

У вас не так указан вьюпорт. Надо так:

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

Comments

[Андрей]

установлю этот, но перепробовал все, предложенные на хабре (в одной из ТОП статей)

[Лучник *range attack +10*]

Как результат?

[Андрей]

онлайн-сервисами проверяю - не поменялось. с тел.нет возможности зайти :) ssmart-designs.com.ua (пациент)

[Лучник *range attack +10*]

Дело оказалось не во вьюпорте, а в том, что у вас через медиазапросы (media screen and (min-width: 59.6875em) и т. д.) прописаны размеры элементов на разных разрешениях. Сайт сжимается на экранах смартфонов и даже если просто сжать окно браузера. Вам нужно либо прописать для каждого разрешения размеры элементов сайта, либо убрать медиазапросы вовсе.