Не получается корректно задать @media запросы?

Question

[Евгений]

Здравствуйте!
Теорию изучил, все вроде понятно... но

Верстку делаю от большего к меньшему.
Стили выглядят следующим образом:

html, body{
	width: 100%;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:100%/1.4;
}

{ тут идут стили для полной ширины экрана 1920px}

/* медиа-запросы */

@media (max-width: 1400px) { }

@media (max-width: 1200px) { }

@media (max-width: 1000px) { }

@media (max-width: 900px) { }

@media (max-width: 800px) {
	body{ width: 800px; }	
}

Breakpoint'ы не прям такие (по пикселам) но не столь важно. Нужно, что бы сайт с полной ширины на FullHD мониторах 1920px сворачивался до минимальной ширины в 800px. И дальше масштабированием показывался на устройствах, у которых ширина экрана меньше 800px.

Вроде все работает. В Firefox Ctrl+Shift+M сжимаю экран, блоки перепрыгивают, все ок. На ширине 800px появляется горизонтальная прокрутка, типа дальше всё. Проверяю на Iphone 5 - все ок, сайт из запроса max-width: 800px масштабируется на полную ширину телефона. До этого момента все правильно.

Но если посмотреть на планшете, у которого ширина экрана в диапазоне больше 800 и меньше 1920 px, то появляется горизонтальная прокрутка. В Firefox'e на мониторе компа такого нет, а на девайсе есть.

тег

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

прописан

на телефоне тоже появлялась горизонтальная прокрутка, пока в медиазапросе max-width: 800px не указал body{ width: 800px; }

Что я делаю неправильно?

Answer 1

[Евгений]

Ну неужели никто не знает?... или ни у кого такого не было?

может быть нужно в каждом запросе указывать ширину body?
ну например так:

html, body{
  width: 100%;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:100%/1.4;
}

{ тут идут стили для полной ширины экрана 1920px}

/* медиа-запросы */

@media (max-width: 1400px) { 
body { max-width:1400px}
}

@media (max-width: 1200px) {
body { max-width:1200px}
}

@media (max-width: 1000px) {
body { max-width:1000px}
}

@media (max-width: 900px) {
body { max-width:900px}
}

@media (max-width: 800px) {
  body{ width: 800px; }	
}

но body указан в самом начале 100% и он распространяется на все стили (перебивает его только body{width:800px} в последнем запросе. Ну а 100% это я так понимаю от края до края экрана... ни больше не меньше...

так почему появляется горизонтальная полоса прокрутки?

Answer 2

[Владимир Кабыш]

Может забыл reset.css?
Могу посоветовать только одну статью. Надеюсь поможет.
Тебе сюда

Answer 3

[Сергей Золотарёв]

А есть ли расширение для Firefox для того, чтобы проверить адаптивный дизайн только одного сайта, используя предлагаемые типы устройств и специальные инструменты для веб-программиста(знаю такое расширение User Agent Switcher, которое работает во всем браузере, переходя на мобильные версии)?