Why small screens with high pixel density are rendering wrong media query?

Question

I came across a strange problem while I was testing a simple webpage made in webflow, for responsiveness. Now this is not a webflow question, but I think the problem has something to do with the resolution, physical screen size and pixel density. Just it's not clear to me what is happening. So there were 3 media queries. One for mobile/iPad (we will ignore them since they worked as expected), laptop screen(1280 to 1024px) and large desktop screen (equal to or above 1920). I styled the site on 1920 and the chrome Dev tool also rendered it for lower and higher screens as I expected. But when the site was viewed in a MacBook whose resolution is much higher than 1920 but the physical screen size is much smaller than a traditional monitor, rendered the media query styled for laptops. I expected with its high resolution, it will display the highest media query. Why this has happened and how to get around this? Or this is actually okay and no fix is needed?