Search code examples
csswebscreen-resolution

Two screens with the same dimensions but different resolutions in Web

I am trying to create the responsive header and I applied the style as follows,

@media (min-width: 1300px) and (max-width: 1400px) {
 .headerText {
    left: 40%;
 }
}

When I am testing the same in two machine with same resolution (1366*768) with different monitor size 15" and 19" , It shows the different view.

So is there any way that, I can apply different css for different size monitor or what would be the best solution for this?

Note: There is same question in the community but that is focused on the anriod.

Solution

  • Have added viewport in head section.

    <meta name="viewport" content="width=device-width, initial-scale=1">