When I presume that a css media query with max-width: 768px can make my web page responsive to fit a mobile device. However, iPhone X and later still load the desktop version, because recent phones have even higher resolution than an old desktop.
How do I detect a mobile device not relying on the screen resolution, with Vanilla javascript, pure HTML and CSS?
Pixels don't actually work based on the real density of the screen. The pixels we use are Density independance and the get scalated depending on the screen. If you follow up the media query Bootstrap uses you can see they actually set it as max-width: 575.98px for mobile devices.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }