Некорректное отображение на мобильных устройствах

[gurov87]

Здравствуйте, есть макет фиксированной ширины в 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, в футере обрезается заливка и одна кнопка, в хедере заливка и блок социальных ссылок.

[Great Rash]

Читали?

[gurov87]

не читал, спасибо!

Помогло:

<meta name="viewport" content="width=1150">

теперь все на местах.