В чем разница между window.innerWidth window.outerWidth?

Я рассмотрел объект window в Firebug. window.innerWidth и window.outerWidth являются 1230.

В чем разница между этими двумя значениями?

ОТВЕТЫ

Ответ 1

В Mozilla Developer Network:

window.outerWidth

window.outerWidth получает ширину внешней части окна браузера. Он представляет собой ширину всего окна браузера, включая боковую панель (если расширен), окно хром и окно изменения размеров границ/ручек.

и

window.innerWidth

Ширина (в пикселях) окна просмотра окна браузера, включая, если рендеринг, вертикальная полоса прокрутки.

Это якобы, как они работают. Однако тестовая страница показывает, что они одинаковы независимо от того, как я изменяю их размер в Firefox 14.0.1 на Ubuntu 12.04. В Chromium они возвращают числа, которые отличаются 8 пикселями. Выполняя немного мертвых расчётов, кажется, что окно хром на этом конкретном приложении составляет около 4 пикселей с левой стороны и 4 пикселя с правой стороны и что эта разница правильно выбрана в этом браузере.

Код для тестовой страницы, которую я использовал:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>12066093</title>
    <meta charset="utf-8">
</head>
<body>
<div style="width:2000px; height: 2000px;">hi</div>
<script type="text/javascript">
    alert("window.innerWidth: " + window.innerWidth + "\nwindow.outerWidth: " + window.outerWidth);
</script>
</body>
</html>

Ответ 2

Проверьте ссылку Mozilla для window.innerWidth и window.outerWidth. Если у вашей операционной системы/диспетчера окон есть окно, window.outerWidth включает границы окна, ручки изменения размера и боковые панели.

Попробуйте открыть закладки или боковую панель истории, а затем повторите попытку в Firebug.