Как сделать корректное отображение сайта на планшете и на смартфоне?

Question

[Иван Козлов]

Имеется сайт babynsk.ru
Как сделать так, чтобы он одинаково отображался на мобильных устройствах и планшете.

В head стоит метка

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

здесь initial-scale=1 - на планшете отображается норм, на телефоне в портретном режиме видна лишь часть экрана.

если initial-scale=0.1 - то на телефоне отображается норм в портретном режиме, но на планшете и телефоне в ландшафтном режиме не норм.

Как сделать правильно, что бы поправить этот недочет?

Answer 1

[Алексей]

Может дело в том что сайт не адаптивный и с установленой минимальной шириной? В браузере при разрешении < 1000px по ширине он тоже плывет. Можете поиграться со скриптами и при определении ширины экрана устанавливать initial-scale в нужное значение, а можете посадить на сетку и адаптивить, что по мне предпочтительнее.

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
if (screen.width < 720)
{
    var mvp = document.getElementById('vp');
    mvp.setAttribute('content','initial-scale=0.1');
}

Comments

[Иван Козлов]

То что нужно))

Answer 2

[Andrey Plax]

А это не подойдёт?
ktonanovenkogo.ru/html/bootstrap/bootstrap-3-otzyv...
getbootstrap.com

Comments

[Иван Козлов]

Меня интересовало именно корректное отображение на всех устройствах. Т.е. что видим на компе, то и на устройствах. Бутстрап для адаптива. Адаптив мне не нужен:)