Проблема с CSS для мобильного сайта

Question

Я строю этот мобильный сайт.

Если вы проверите его в своем мобильном браузере, он должен соответствовать, чтобы не было горизонтальной прокрутки.(Контент должен быть сложен только вертикально).Может кто-нибудь помочь мне в исправлении CSS страницы.Просто дайте мне знать, каким должен быть правильный CSS-код для автоматической настройки для разных мобильных телефонов.

CSS этой страницы можно найти здесь .В основном, два основных компонента, я думаю.(тело и содержание).

Кроме того, я использовал этот мобильный веб-сайт в качестве образца.Пожалуйста, обратитесь к встроенному CSS, просмотрев источник этой страницы.

Спасибо

Answer 1

Хорошо, похоже, что ваш #content div фактически раздвигает границы экрана даже в моем большом браузере Firefox. В вашем CSS это объявлено так:

#content{
    width:100%;
    margin: 0;
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Я подтвердил, отредактировав CSS локально, что ваш отступ фактически раздвигает границы раздела ширины 100%, но хорошая новость заключается в том, что, поскольку он является элементом уровня блока, он уже заполняет всю доступную ему комнату. Попробуйте избавиться от "width: 100%;" и посмотрим, сработает ли это для вас. Он будет отображаться точно так же, но без этих полос прокрутки.

Так что-то вроде этого:

#content{
    padding: 20px;
    background: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}