В общем, наконец я почти доделал свой сайт,
и т.к. я перенес его сразу на хостинг с локального сервера, то не имел возможности в процессе написания посмотреть, как верстка выглядит на смартфонах.
Сейчас вот посмотрел, и там жесть.

В принципе, на сайте блоки расположены почти стандартным способом -
сверху идет шапка на всю щирину , по центру идет блок чуть более узкий (80%),
ну и снизу подвал тоже на всю ширину .

Еще есть fixed блок с изображением позади центрального блока с z-index: -1.
Если кто хочет - можете посмотреть по ссылке выше.

Так вот. почему-то на смарте в Опере центральный блок не центрируется (ну вы поняли) , а липнет к левому краю страницы. в Хроме все нормально.

fixed-блок показывается в Хроме не полностью, а в Опере слишком большим.
Его фоновое изображение имеет размер 1400 пикселей в ширину,и 470 в высоту, если это важно.

Вот CSS:

//Шапка
#header {
	
	margin: 0 auto;
	border-bottom: 2px solid #292827;
	background-image: linear-gradient(to top,#171717,#111,#040404,#010101);
	box-shadow: 0 10px 18px #131313;
	
}

//Центральный блок
.content {
	
	margin: 0 auto;
	width:77%;
	min-height:1000px;
	background: #3c3c3c;
	padding:10px;
} 

//Подвал
#footer{
	border-top: 2px solid #292827;
	background-image: linear-gradient(to top,#171717,#111,#040404,#010101);
	box-shadow: 0 10px 18px #131313;
	height: 30px;
}


//fixed-блок
#title{
	background: url(/images/interface/main.jpg) no-repeat ;
	position: absolute;
	z-index:-1;
	width: 100%;
	height: 90%;
	margin: 0 auto;
	
}

Помогите пожалуйста изменить стили , чтобы все везде выглядело так, как при просмотре на компьютере.