Я играю с медиа-запросами и начал разрабатывать для мобильного экрана. У меня есть первая страница относительно того, как я хотел бы, но у меня появляется горизонтальная полоса прокрутки внизу, когда я изменяю размер экрана до ‹480px. Я еще не тестировал это на мобильном устройстве, но предполагаю, что появится та же ошибка.
Сайт: http://brad.sebdengroup.com/newOdynSite/index.php.
Чтобы воссоздать ошибку, откройте сайт, измените размер окна до ‹480px и вертикально прокрутите вниз.
Вот проблема:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
Эта комбинация правил CSS создает элемент, размер которого превышает ширину страницы. Ширина 100% не включает пространство, используемое отступами, границами или полями. Например, если ширина страницы 480 пикселей, ширина элемента будет 20 пикселей + 480 пикселей + 20 пикселей = 520 пикселей.
Чтобы избежать этого, попробуйте обернуть содержимое дополнительным тегом, чтобы ширину и отступы можно было применить к отдельным элементам, и подправьте CSS по мере необходимости. Например:
<span><strong>What have we done?</strong></span>
Вы можете попробовать использовать overflow-x: hidden; на ‹тело›, чтобы просто скрыть полосу прокрутки. Однако вы не сможете легко увидеть содержимое за пределами области просмотра.
Для мобильных устройств вы можете использовать медиа-запросы для указания таблиц стилей:
<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">
Или вы можете использовать элементы ‹meta›:
<meta name="viewport" content="width=device-width, user-scalable=no">
