CODEWITHSUNDEEP
javascriptjquerycsshtml
QBM5
QBM5

Reputation: 2788

InnerWidth $(window).width() do not match actual width when in mobile debugging

I am using Chrome to develop a mobile website. In this website I do a lot based on the width of the screen. I am running into an issue where when I try to retrieve the width through either 

window.innerWidth

or

$(window).width()

it is slightly different than what I see the actual width is in the debugger

for example I removed all css and content ran this code

<html style-"width: 100vw"> <!-- 100% has the save effect -->
<head>
</head>
<body id="body" style-"width: 100vw">
</body>
</html>

the innerWidth property is 375 (emulating iphone6) but the actual width is 375.33

This may seem like a small difference but I have a side scrolling portion of the application and after a few scrolls (by device width) it is very apparent that the alignment is off by a few pixels and gets worse with each scroll. I can only attribute this to the fact that I am scrolling by 375px at a time but I need to be scrolling at 375.33px (when I manually account for the difference it works correctly)

To make matters worse, I tried the exact same code on a different machine and the measurements were correct.

I am scratching my head here and would appreciate any help

Upvotes: 2

Views: 1480

Answers (1)

Nick G
Nick G

Reputation: 1973

window.innerWidth is used to find the

Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.

(Source)

$(window).width() is a method that

// Returns width of browser viewport

(Source)

The latter does not include the width of the scroll bar as part of the viewport's width (I used this page in chrome's dev tools and got window.innerWidth = 1920 and $(window).width() = 1899, the difference being 21px for the scroll bar). My guess is that your scroll bar on the mobile site has an extra 0.33px for some reason. I would check the ways you're displaying/styling it, as that may increase the width and cause the difference of 0.33px. Hopefully that helps a bit, if you can post any code that would also be more helpful to debug.

Upvotes: 2

Related Questions