{"action":"created","issue":{"url":"https://api.github.com/repos/jquery/jquery/issues/1729","labels_url":"https://api.github.com/repos/jquery/jquery/issues/1729/labels{/name}","comments_url":"https://api.github.com/repos/jquery/jquery/issues/1729/comments","events_url":"https://api.github.com/repos/jquery/jquery/issues/1729/events","html_url":"https://github.com/jquery/jquery/issues/1729","id":46337923,"number":1729,"title":"$(window).width() AND $(window).outerWidth() excluding the scrollbar width","user":{"login":"mzgol","id":1758366,"avatar_url":"https://avatars.githubusercontent.com/u/1758366?v=3","gravatar_id":"","url":"https://api.github.com/users/mzgol","html_url":"https://github.com/mzgol","followers_url":"https://api.github.com/users/mzgol/followers","following_url":"https://api.github.com/users/mzgol/following{/other_user}","gists_url":"https://api.github.com/users/mzgol/gists{/gist_id}","starred_url":"https://api.github.com/users/mzgol/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mzgol/subscriptions","organizations_url":"https://api.github.com/users/mzgol/orgs","repos_url":"https://api.github.com/users/mzgol/repos","events_url":"https://api.github.com/users/mzgol/events{/privacy}","received_events_url":"https://api.github.com/users/mzgol/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/jquery/jquery/labels/Dimensions","name":"Dimensions","color":"0052cc"}],"state":"open","locked":false,"assignee":{"login":"dmethvin","id":157858,"avatar_url":"https://avatars.githubusercontent.com/u/157858?v=3","gravatar_id":"","url":"https://api.github.com/users/dmethvin","html_url":"https://github.com/dmethvin","followers_url":"https://api.github.com/users/dmethvin/followers","following_url":"https://api.github.com/users/dmethvin/following{/other_user}","gists_url":"https://api.github.com/users/dmethvin/gists{/gist_id}","starred_url":"https://api.github.com/users/dmethvin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmethvin/subscriptions","organizations_url":"https://api.github.com/users/dmethvin/orgs","repos_url":"https://api.github.com/users/dmethvin/repos","events_url":"https://api.github.com/users/dmethvin/events{/privacy}","received_events_url":"https://api.github.com/users/dmethvin/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/jquery/jquery/milestones/2","labels_url":"https://api.github.com/repos/jquery/jquery/milestones/2/labels","id":561714,"number":2,"title":"3.0.0","description":"","creator":{"login":"dmethvin","id":157858,"avatar_url":"https://avatars.githubusercontent.com/u/157858?v=3","gravatar_id":"","url":"https://api.github.com/users/dmethvin","html_url":"https://github.com/dmethvin","followers_url":"https://api.github.com/users/dmethvin/followers","following_url":"https://api.github.com/users/dmethvin/following{/other_user}","gists_url":"https://api.github.com/users/dmethvin/gists{/gist_id}","starred_url":"https://api.github.com/users/dmethvin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dmethvin/subscriptions","organizations_url":"https://api.github.com/users/dmethvin/orgs","repos_url":"https://api.github.com/users/dmethvin/repos","events_url":"https://api.github.com/users/dmethvin/events{/privacy}","received_events_url":"https://api.github.com/users/dmethvin/received_events","type":"User","site_admin":false},"open_issues":37,"closed_issues":68,"state":"open","created_at":"2014-02-07T02:09:56Z","updated_at":"2015-01-31T01:43:57Z","due_on":null,"closed_at":null},"comments":26,"created_at":"2014-10-20T23:23:50Z","updated_at":"2015-02-01T22:13:46Z","closed_at":null,"body":"Originally reported by antti@… at: http://bugs.jquery.com/ticket/14989\n<p>\nIt is sometimes annoying that $(window).width() or $(window).outerWidth() do not include the scrollbar width in their value. Especially when trying to match the window width to the CSS media queries.\n</p>\n<p>\nCurrently e.g. if you have a media query in the CSS such as\n</p>\n<pre class=\"wiki\">@media screen and (max-width: 1600px) {\n  body {background: red;}\n}\n</pre><p>\nWhen the red background is actually applied to the document by the browser, jQuery tells the window width is less than 1600px (1600 - scrollbar width).\n</p>\n<p>\nThis is annoying e.g. in cases where there are some mobile-specific stuff that needs to be done in both, CSS and JS. And they would need to be done at the exactly same width of the document/window.\n</p>\n<p>\nHowever, plain JavaScript returns 1600 as the window width when asked at the point of the breakpoint as follows:\n</p>\n<pre class=\"wiki\">console.log(window.innerWidth);\n</pre><p>\nIs it possible to get either $(window).width() or $(windor).outerWidth() working consistently with the browser's actual width? $(document).width() and $('body').width() will not return the same as \"window.innerWidth\" either, they return the same as $(window).width() and $(window).outerWidth().\n</p>\n<p>\nFixing this would greatly help making consistent code with the CSS media queries.\n</p>\n<p>\nPossible workarounds currently are:\n</p>\n<ul><li>Using plain javascript, i.e. window.innerWidth\n</li><li>Checking $('...').is(':visible') for some element that is visible only in the target width\n</li></ul><p>\nHere's an example of what I mean:\n<a class=\"ext-link\" href=\"http://jsfiddle.net/aq5vb/\" rel=\"nofollow\"><span class=\"icon\">&nbsp;</span>http://jsfiddle.net/aq5vb/</a>\n</p><p>Issue reported for jQuery 2.1.0</p>"},"comment":{"url":"https://api.github.com/repos/jquery/jquery/issues/comments/72387448","html_url":"https://github.com/jquery/jquery/issues/1729#issuecomment-72387448","issue_url":"https://api.github.com/repos/jquery/jquery/issues/1729","id":72387448,"user":{"login":"scottgonzalez","id":141167,"avatar_url":"https://avatars.githubusercontent.com/u/141167?v=3","gravatar_id":"","url":"https://api.github.com/users/scottgonzalez","html_url":"https://github.com/scottgonzalez","followers_url":"https://api.github.com/users/scottgonzalez/followers","following_url":"https://api.github.com/users/scottgonzalez/following{/other_user}","gists_url":"https://api.github.com/users/scottgonzalez/gists{/gist_id}","starred_url":"https://api.github.com/users/scottgonzalez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/scottgonzalez/subscriptions","organizations_url":"https://api.github.com/users/scottgonzalez/orgs","repos_url":"https://api.github.com/users/scottgonzalez/repos","events_url":"https://api.github.com/users/scottgonzalez/events{/privacy}","received_events_url":"https://api.github.com/users/scottgonzalez/received_events","type":"User","site_admin":false},"created_at":"2015-02-01T22:13:46Z","updated_at":"2015-02-01T22:13:46Z","body":"I'm neutral on it. If the change enables some reasonable use cases, I think it's ok to allow the breaking change in a major release. The userland fix for the breaking change is pretty simple."}}