CODEWITHSUNDEEP
css
Max Koretskyi
Max Koretskyi

Reputation: 105497

Why is my website width is less than my screen resolution

According to Display Setting in Windows, my laptop's screen resolution is 1920 x 1080. When I open a browser, and check the width of the browser using Developer Tools it shows me 1536 px. Why are they different? Is it the difference between hardware pixels and software pixels (CSS pixels) mentioned in this article:

When Apple pioneered this with their Retina display, they split the concept of pixels into hardware pixels and software pixels. A hardware pixel is an individual dot of light in the display. A software pixel, also called a CSS pixel in the web world, is a unit of measurement.

Upvotes: 6

Views: 3005

Answers (1)

madjaoue
madjaoue

Reputation: 5224

First check that your zoom is 100%.

Device Pixel Ratio

The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution. what exactly is device pixel ratio?

you can get this ratio using : window.devicePixelRatio.

If this ratio is greater than 1, then your available screen size will be less than the logical one. This means that you can have a logical resolution of 1920 x 1080 while your hardware resolution is 1536 x 864

Example

First let us examine the available screen size using window.screen

Now, suppose that :

  1. window.devicePixelRatio == 1.25
  2. window.screen.availWidth == 1536

The logical width would be:

window.devicePixelRatio * window.screen.availWidth == 1920

Upvotes: 5

Related Questions