gurov87

не читал, спасибо! Помогло: <meta name="viewport" content="width=1150">теперь все на местах.

Здравствуйте, есть макет фиксированной ширины в 1150px, по макету в header и footer сайта есть блок с заливкой на всю ширину страницы как в примере кода. <div class="wide"> <div class="menu"> <ul> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </div></div>* { margin: 0; padding: 0; }.wide { background: #6B1B1B; width: 100%; }.menu { width: 1150px; margin: 0 auto; height: 30px; text-align:center;}li { display: inline-block; }a { color: #FFF; display: block; padding: 3px 15px; }Данный пример демонстрирует проблему с которой я столкнулся, на ноутбуках и десктопах все отображается как надо - полоса с заливкой на всю ширину онка, по центру вывод блока с ссылками. Если открыть этот сайт на планшете или смарте, то устройство масштабирует сайт таким образом, чтобы он целиком влез на экран, собственно проблема в том, что полоса с фоном которая должна заполнять весь экран обрезается справа (на ipad 3 еще и со смещением фона и нарушением расположения блоков). Опытным путем установил, что если указывать размер фиксированным блокам не более 980px такого не наблюдается, либо если не использовать в макете блоков на всю ширину экрана, например помещать все в контейнер с фиксированной шириной, тогда при открытии сайта на моб. устройствах он масштабируется и корректно отображается. Подскажите пожалуйста как можно этого избежать. P.S. Такой же эффект можно наблюдать при просмотре шаблона _http://www.freecsstemplates.org/preview/reciprocal, в футере обрезается заливка и одна кнопка, в хедере заливка и блок социальных ссылок.