Вопрос про адаптивный дизайн

159

25 октября 2018, 05:40

Недавно начал изучать адаптивный дизайн и возник теоретический вопрос: Является ли сайт адаптивным (или же отзывчивым) если у него есть горизонтальная полоса прокрутки(к примеру тот же stackoverflow). У самого в учебной верстке все элементы обернуты в класс .container с width: 90%; а сами блоки построены на flexbox c justify-content: space-between; - таким образом все элементы страницы соответственно подгоняются под размер окна браузера а скролл стоит на overflow-x: hidden; :

Вопрос: стоит ли так заморачиваться или же просто указать фиксированную ширину body как на stackoverflow? Заранее спасибо.

Answer 1

Давайте по порядку:

Страница считается адаптивной, когда в <head> прописан <meta name="viewport" content="width=device-width, initial-scale=1">. С этого момента все роботы будут считать страницу адаптивной под мобильные устройства.
Не думаю, что заказчик или кто-либо еще оценит горизонтальный скролл на странице. Писать overflow-x: hidden - костыльно, ибо нужно разбираться, из-за каких именно блоков появляется горизонтальный скролл, а не рубить все с плеча.

Если говорить про фикс. ширину SO, то зайдите на него с мобильного устройства и Вам откроется мобильная версия. Тут дело в другом, адаптация происходит в переадресации на другой адрес, а не на самом SO.

Answer 2

Страница не адаптивная, если можно скроллить. Я вместо width = 90% использую html,body{overflow-x:hidden} и не забываю в head html-документа прописать <meta name="viewport" content="width=device-width, initial-scale=1">. Таким образом ширина документа приравнивается ширине экрана любого устройства и проблем в горизонтальной прокруткой не возникает (если элементы не выпирают). При width = 90% неудобно задавать размеры, если они не относительные.