CODEWITHSUNDEEP
javascripthtmlbrowserscreenviewport
Katerl3s
Katerl3s

Reputation: 263

Change viewport-hardware pixel scaling

How do I make the pixels of the content of my browser (chrome 44.0.2403.155 m) coincide with those of my physical screen (laptop computer)?

I'm totally new to front-end development and just painfully discovered, after spending hours generating an image of a specific size in pixels, that the (virtual?) pixels in the browser's screen do no coincide with those of my physical screen hardware. There's a lot of material out there about responsive design but there is not UX consideration to make in what I am doing. What I need is the pixels in my browser to coincide with those of my screen.

I tried both <meta name="viewport" content="width=1920"> (1920px is the width of my screen) and <meta name="viewport" content="width=device-width, initial-scale=1.0"> but I don't see any change, not even when I play with those numbers (Is this viewport meta tag intended only for mobile devices?). I also learned that there exists the window.screen object and that window.screen.height and window.screen.width but they are read only.

Upvotes: 0

Views: 374

Answers (1)

Katerl3s
Katerl3s

Reputation: 263

After trying a LOT of things I found the answer: The reason why I didn't have a 1:1 scale between my browser's pixels and my physical screen's pixels was that my windows 10 was set to scale everything:

enter image description here

Taking this X% setting, the browser sets the width of its screen as

(Physical Screen Width) / X%

In my case, that is 1920px / 150% = 1280px

After changing this setting to 100%, I get 1-to-1 correspondence between browser and screen pixels.

I also found here in StackOverflow that the viewport metatag does not affect a non-mobile (desktop, laptop, ...) device browser. I would like I had found this answer in an official document, though.

Does Viewport affect desktop browsers?

How do desktop browsers handle mobile meta tags?

Upvotes: 2

Related Questions