Why bigger dimension device has less screen.width compared to some smaller dimension device?

Question

During testing, I found out that few very large dimension device Oppo (5.5") has screen.width equals to 360px where as lower dimension device like iPhone 7 has screen.width equals to 375px .

How do I understand the nuances and measure the device width effectively?

Answer 1

px means pixel ie number of illuminated spots. This is only dependant on the screen resolution, not the width as a unit of length.

Answer 2

If you want the effective window width you can try this.

 console.log($(window).width()); // returns width of browser viewport console.log($(window).height()); // returns height of browser viewport 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

For more details read this