Как я могу удержать страницу с выравниванием по центру от обрезания левой стороны, когда она не помещается на экране?

Question

У меня есть страница, которая находится в центре, и она обрезается на левой стороне на iPad и некоторых браузерах, особенно если контент шире, чем экран.Как я могу убедиться, что левая сторона не обрезается (или что она выравнивается по левому краю, если экран слишком узкий)?Вот эта страница: http://nextgenhealth.com/

Спасибо!

Answer 1

Одним из вариантов будет использование медиазапросов CSS3 .

Например, установите порог, когда ваш контент переключится с центрирования на привязку слева.

В вашем CSS:

@media all and (max-width: 600px) {
    /* styles for when the browser is left than 600px in width */
    #site-body-content {
        left: 0;
        margin-left: 0;
    }
}

@media all and (min-width: 600px) {
    /* style content when our browser is greater than 600px in width */
    #site-body-content {
        left: 50%;
        margin-left: -600px;
    }
}

Это должно охватывать мобильное сафари, но, к сожалению, медиазапросы поддерживаются только в IE начиная с версии 9 и выше. Информация о совместимости: http://caniuse.com/css-mediaqueries

Кроме того, вы можете проверить ширину браузера при загрузке и прослушать события изменения размера окна в Javascript и соответствующим образом обновить ваш CSS.