Какой CSS/jQuery использовать, чтобы избежать отключения сайта для пользователей с низким разрешением экрана? ⇐ CSS

[Anonymous]

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

Вот код моего существующего сайта: http://jsfiddle. net/syQgH/1/, соответствующий CSS показан ниже:

Код: Выделить всё

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 20px 200px 20px 200px;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}

Вот полный результат страницы: http://jsfiddle.net/syQgH/1/embedded/result/

Пользователи с меньшей шириной экрана увидят его обрезанным по оси X и полосу прокрутки по оси Y. Я знаю о добавлении overflow-y для добавления полосы прокрутки по оси X, но в идеале я могу иметь динамическое серое пространство вокруг сайта размером 140 пикселей, где позволяет ландшафт экрана, но мало или вообще ничего там, где этого нет. Я предполагаю, что мне следует использовать для этого проценты, а не фиксированные значения пикселей, но, похоже, это имеет тот же эффект, поскольку я не хочу, чтобы это действовало на пользователей, у которых недостаточно ландшафта экрана.

Я открыт для решения на основе JavaScript/jQuery.

Подробнее здесь: https://stackoverflow.com/questions/173 ... -screen-re