Почему значение $ (window) .width() будет больше, чем ширина max max?

В моем CSS У меня есть такой код:

html { 
background:blue; 
} 
@media screen and (max-width: 980px) 
html { 
background:red; 
}

Так что, когда окно браузера меньше 980px, фон становится красным, остальное время, это синий цвет.

Я изменил размер моего окна на 970px (согласно CSS), и фон красный. Но когда я использую jQuery, чтобы сделать alert($(window).width()), который дал мне всплывающее высказывание, 1000px

Почему $ (window) .width() сообщает большее значение, чем ожидает CSS?

источник

2013-04-09 John

Возможный дубликат [внутренняя ширина и внешняя внешность на рабочем столе] (http://stackoverflow.com/questions/22468878/innerwidth-and-outerwidth-oddness -он-рабочий стол) –

Я понял проблему.

В chrome я нажал CTRL MINUS несколько раз, чтобы окно масштабировалось таким образом, чтобы иметь меньший текст. Как только это будет сделано, jquery wil сообщит о другой ширине окна из того, что сообщение css

источник

2013-04-10 00:32:49 John

Я считаю, что существует разница между видимой страницей и размером окна. В ванильным JS, насколько я понимаю:

window.innerWidth, window.innerHeight

(на страницы видимая ширина/высота)

window.outerWidth, window.outerHeight

(браузер внешняя ширина/высота)

Это меня поражает, что это вероятно, почему - возвращаемое значение - это внешняя ширина окна браузера. Source

источник

2013-04-09 23:43:48

Недостаточно фона, чтобы рассказать вам, что именно происходит в вашем браузере.

я написал следующую страницу, чтобы проверить все из:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<style> 
    html { background:blue; } 
    @media screen and (max-width: 980px) { 
     html { background:red; } 
    } 
</style> 
</head> 
<body>test</body> 
</html>

И после тестирования его с инспектором, $(window).width() внутри инспектора Хром показывает именно то, что должно быть.

В то время как экран красный, следующий стиль устанавливается в инспекторе:

margin-left: 8px; 
margin-right: 8px; 
width: 964px;

... и JQuery в консоли показывает:

> $(window).width() 
980

Общая ширина ширина + все поля. Итак, это: 964 + 8 + 8 = 980.

На мой взгляд, это несоответствие вызвано полями и, возможно, границами, установленными для тегов, которые вы измеряете, и любых родительских тегов. Я не вижу других причин такого поведения.

Надеюсь, это поможет.

источник

2013-04-10 00:04:43

Почему значение $ (window) .width() будет больше, чем ширина max max?

ответ

Смежные вопросы