Разница двух результатов ширины браузера?

Question

[Анна Бакурова]

Ну мне кажется не Я одна сталкивалась с этой проблемой и не один раз.
Суть такова что когда мы смотрим ширину браузера при resize в инспекторе свойств к примеру в гугл хром то он нам выводит всплывающей подсказкой значение (ширина х высота)
Всё бы ничего, но как появляется на странице скролл и мы попытаемся вывести через консоль document.body.clientWidth то нам выведет значение не равное тому что мы видим в всплывающей подсказке, а ширину окна минус ширина скролла.
И тут появляется загвоздка что если нам под адаптацию нужно менять не только css, но и js то js (что естественно) при условиях которые опираются на ширину срабатывают раньше условия css @media

Кто как решает это и если ли статьи про это горе.

Внимание! Перед ответом проверьте этот феномен на странице где есть сролл
document.body.clientWidth

Answer 1

[Евгений Петров]

Ширина окна (учитывает скролл)
window.innerWidth
Ширина области просмотра (не учитывает скролл)
document.documentElement.clientWidth

Дополнение — о появлении прокрутки можно судить по

document.documentElement.clientHeight < document.documentElement.scrollHeight

Comments

[Анна Бакурова]

Это и так ясно что у нас есть разница.. А как это обходить?
Единственное что Я нашла так это узнавать через скрипт ширину скролла и прибавлять его к window.width - но это не совсем верно к примеру на некоторой яблочной технике в некоторых браузерах скролл заходит на страницу (к примеру у меня так на iPad).
И ещё вот косяк нашла voten.ru/Nixioutlet - тут на сайте min-width: 1024 а на 1052 уже появляется скролл (ну у меня это +28). И Вот как в таких случаях.
То что проблема есть это понятно, а как её обходить

[Евгений Петров]

@Libris я написал, как считать ширину окна — window.innerWidth
Какой смысл обсуждать то, как посчитать ширину скролла?
Что есть такое window.width и зачем оно нужно?
jsfiddle.net/petroveg/cb21n3yv

[Анна Бакурова]

window.innerWidth - не учитывает...

[Анна Бакурова]

и как с css это решить

[Евгений Петров]

@Libris если говорить про JS, то узнать ширину окна можно по window.innerWidth. Только зачем она нам, если может появиться полоса прокрутки и ширина области просмотра уменьшится?

Если я знаю, что мой сайт откроют на мониторе с разрешением 1024х..., то будет большой странностью, мягко говоря, писать min-width:1024px. Потому что как только сработает условие, о котором я писал в ответе, появится вертикальная прокрутка, и тут же автоматически горизонтальная.

Именно это и происходит на указанном сайте. В блоке с min-width:1024px находится другой с width:1024px. У меня нет слов, зачем это нужно.

Как бороться? Учесть, что максимальная ширина области просмотра не должна использоваться для min-width у элементов на странице.

[Анна Бакурова]

@Petroveg min-width:1024px находится другой с width:1024px - хм не вижу.. это какая строка кода? Отпиши тогда ему Как расположить блоки? где поправить

[Евгений Петров]

@Libris не, с элементом внутри я ошибся, но это не меняет абсолютно ничего. Если ставить минимальную ширину 1024, то это значит, что при высоком контенте прокрутка появится примерно на 1041 пикселей для окна.

[Евгений Петров]

@Libris бегло смотрел и перепутал #container с #content. Повторюсь, что это вообще неважно.

[Анна Бакурова]

@Petroveg ну она может варьироваться от 1024 до около 1050 - нельзя избежать этого? просто бывают случаи (редкие но есть) когда это важно

[Евгений Петров]

@Libris я ничего не понимаю. Если мы ставим элементу на странице min-width:Xpx, то нужно понимать, что горизонтальная прокрутка при высоте контента, превышающем высоту области просмотра, появится при ширине (X + 17)px.

Если это понятно, то спрошу — какую задачу мы вообще решаем? Почему ширина области просмотра при высоте контента, превышающей собственную высоту области просмотра, уменьшается на ширину полосы прокрутки?

[Анна Бакурова]

@Petroveg короче из ответа Я вывела ответ на свой вопрос что нет - нельзя избежать. Только отпиши это тому парню что спрашивал почему у него скролл раньше появляется

[Евгений Петров]

@Libris строго говоря, я не понимаю вопрос. Можно показать другой пример?

[Анна Бакурова]

@Petroveg да но уже завтра...