CODEWITHSUNDEEP
javascriptgoogle-chromebrowserscreen
Michael McCrickard
Michael McCrickard

Reputation: 355

Window size is larger than screen size?

When I check the screen.width using javascript in my Chrome browser, it reports 1920, which is what I expect. If I drag my Chrome window out to the full width of my screen and check $(window).width(), I get 2133??? Does the browser use it's own units?

I'm working on some HTML/CSS layouts and trying to make them consistent across different screen resolutions and browser window sizes, but I'm having some issues, so I want to try to understand this issue better.

By request here is the code (in the javascript console):

screen.width()
$(window).width()

For window.devicePixelRatio, I get: 0.8999999761581421

Upvotes: 3

Views: 3208

Answers (3)

Altair7852
Altair7852

Reputation: 1418

Also take a look at viewport meta header, useful if you want responsive behavior on mobile.

Having something like this can make your website properly scale if you have @media tags in you CSS.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

More details in MDN Docs.

Upvotes: 0

gus27
gus27

Reputation: 2656

In addition to @NikhilDevre I'd like to mention, that on desktop browsers the devicePixelRatio can be influenced by the zoom factor you set in your browser:

Using Chrome and setting a zoom factor of 90% you'll get a devicePixelRatio of 0.8999.

Upvotes: 1

Nikhil Devre
Nikhil Devre

Reputation: 393

That is correct behaviour. The window object represents an open window in a browser, not your screen/monitor. Here is more information about the window object in a Document Object Modal (DOM): https://developer.mozilla.org/en-US/docs/Web/API/Window

In particular, this issue is concerns the window.devicePixelRatio, as pointed out by @gus27:

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Upvotes: 1

Related Questions