Центрировать содержимое при горизонтальной полосе прокрутки ⇐ IOS

[Anonymous]

Я разрабатываю адаптивный HTML-шаблон, который можно будет использовать как в настольных, так и в мобильных браузерах. Внутри содержимого у меня есть фиксированная таблица, размер шрифта которой (заголовок и ячейки) уменьшается до определенного предела с помощью медиа-запроса.
Ниже этого предела таблица становится слишком плотной, чтобы ее можно было читать с этим размером шрифта, поэтому мы предпочитаем сохранять ее, даже если она немного выходит за пределы видимой части браузера на мобильных устройствах.

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

Но Safari на iPhone пытается уместить все в видимой области, фактически смещая содержимое слева и оставляя большую пустую область справа, чтобы вместить таблицу.

На изображении ниже оранжевые прямоугольники обозначают область просмотра, зеленый — содержимое, а прямоугольник «Div» — таблица, не помещающаяся в область просмотра. Обратите внимание, что на изображении слева часть Div, превышающая пределы, не видна (меня устраивает это решение).



Как мне добиться, чтобы в CSS всегда был результат изображения слева?

Это соответствующие части HTML:










title













И CSS:

/*Grid System*/
.col {
padding: 0 1.5em;
}
.row .row {
margin: 0 -1.5em;
}
.row:before, .row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
@media only screen {
.col {
float: left;
width: 100%;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}

/* Mobile really small dispalys */
@media only screen and (min-width: 2em) {

table {
font-size: 0.4em;
}

}

/*Mobile normal diaplay*/
@media only screen and (min-width: 12em) {

p, ul {
font-size: 0.875em;
}

table {
font-size: 0.7em;
}

.feature:first-child,
.info:first-child {
border-right: 1px dotted #aaa;
}

.container {
padding: 1em;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.625em;
}

}

/*Tablets*/
@media only screen and (min-width: 54em) {
.content {
border: none;
margin-bottom: 0;
/*border-left: 1px dotted #aaa;*/
}

.info:first-child {
border: none;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.8em;
}
}

/*Desktop*/
@media only screen and (min-width: 76em) {
.info:first-child {
border-right: 1px dotted #aaa;
}

h1 {
font-size: 3em;
}

h2 {
font-size: 2em;
}
}

/* General styles*/
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}

.container {
margin: 0 auto;
max-width: 90em;
padding: 1em 0;
}

.row.section {
margin-bottom: 4em;
}

.content {
margin-bottom: 1.5em;
}


Подробнее здесь: https://stackoverflow.com/questions/302 ... -scrollbar