Форум Сайтостроение Веб-строительство

Верстка адаптивного сайта

[Удален]
722

Народ всем привет, нужна помощь.

Верстаю сайтик с адаптивным дизайном через @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">

, user-scalable=no убрал пока.

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

пациент: http://f2g.webkl.ru/

P
На сайте с 13.09.2013
Offline
39
provice
#1

У вас в условии запроса уже выставлено max-width: 699px;

зачем вы его еще раз ставите в стилях? еще и с отступами не будет корректно отрабатывать

А разметка где? Если структура такова

-.container

--.header

то сами посчитайте: 480+30+30

Jquery не работает .hasClass Автоматическое масштабирование картинок Упал доход
[Удален]
#2

разметка такого вида: 


<div class="header">

	<div class="container">

..............

        </div>

</div>

вы наверно не про то поняли, вопрос о том чтобы сайт на телефоне открылся минимум с шириной 480px, сейчас он открывается почему-то с шириной 360px(если зайти на сайт с телефона то там сообщение с шириной выйдет) и появляется горизонтальная прокрутка которая не нужна

Адаптивный дизайн - минимальная Прошу совет по сайту стоит ли использовать резиновую
P
На сайте с 13.09.2013
Offline
39
provice
#3

Какая ос на телефоне? мне не удается повторить ошибку под андроид и айфон, полагаю дело не верстке, а особенности ос

[Удален]
#4

андройд, на айфоне говорят так же, сейчас скрин постараюсь выложить как отрывается и как хочется чтобы открывался

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

https://drive.google.com/file/d/0B_NLP2Ic1Pr6b1QwOWVvWFR0eUE/edit?usp=sharing

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

https://drive.google.com/file/d/0B_NLP2Ic1Pr6d2VxWk1NQk5RWGs/edit?usp=sharing

P
На сайте с 13.09.2013
Offline
39
provice
#5

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi"> пробуйте

если не будет работать верстайте резиной, без min- max-

[Удален]
#6

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

правда если добавить user-scalable=no то на стандартном андройд браузере все отлично и масштабирование не работает, а на опере открывается как обычно как на 1м скрине, если брать это то и там и там норм правда масштабирование будет мешать немного, ну да ладно ничего страшного)) главное полностью сразу открывается))

еще заметил что в опере окно браузера он считает как 360пх а в стандартном как 540пх странно..

Спасибо кстати))

Обновилась бета-версия интерфейса Яндекс.Карт В Яндекс.Браузере появилась функция Яндекс Браузер с февраля

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий