Как реализовать отображение сайта при минимальном разрешении экрана (телефоны)?

Question

[Антон Шелестов]

Народ всем привет, нужна помощь. Верстаю сайтик с адаптивным дизайном через @media запросы, все норм получается, но проблема появляется тогда, когда сайт открывают на телефоне. Минимальная ширина сайта 480px

используется след. код:

@media (max-width: 699px) {
  .container {
    max-width: 699px;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: auto;
  }
  .header {
    min-width: 480px;
  }
  .maincontent, .beforefooter, .footer, .footerphonesmall, .afterheader, .preimblock, .tarifblock, .opisblockforpc, .opisblockformid {
    min-width: 480px;
  }
}

Тут понятно, что до 699 дизайн тянется, останавливается на 480 пикселях.

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

используется мета тег

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

Есть у кого-нибудь совет по решению данной проблемы? Хотелось бы, чтобы сайт сразу открывался в соответствующем разрешении мин 480px без масштабирования

пациент: ___f2g.webkl.ru

Answer 1

[Ольга Стогова]

в шапке

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

при верстке надо задавать

html {
    overflow-y: scroll;
}

и учитывать справа ширину скролла, тоесть 480 — это не clientWidth, а offsetWidth, то есть не 480, а 480-(ширина скролла)

Answer 2

[Vitaly Musin]

Попробуй так:

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

Comments

[Антон Шелестов]

не помогло( щас попробую картинку выложить

Answer 3

[Антон Шелестов]

как отрывается:

https://drive.google.com/file/d/0B_NLP2Ic1Pr6b1QwO...

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

https://drive.google.com/file/d/0B_NLP2Ic1Pr6d2VxW...