ShelestovAnt
@ShelestovAnt
Верстаю и программирую

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

Народ всем привет, нужна помощь. Верстаю сайтик с адаптивным дизайном через @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
  • Вопрос задан
  • 3206 просмотров
Пригласить эксперта
Ответы на вопрос 3
в шапке
<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-(ширина скролла)
Ответ написан
Комментировать
vmpartner
@vmpartner
In code we trust
Попробуй так:
<meta name="viewport" content="width=device-width, maximum-scale=1">
Ответ написан
ShelestovAnt
@ShelestovAnt Автор вопроса
Верстаю и программирую
как отрывается:

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

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

https://drive.google.com/file/d/0B_NLP2Ic1Pr6d2VxW...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы