如何检测移动设备或台式机上的浏览器？ [复制]

Question

当我假设带有 max-width: 768px 的 css 媒体查询可以使我的网页响应以适应移动设备时。但是，iPhone X 及更高版本仍会加载桌面版本，因为最近的手机比旧桌面具有更高的分辨率。

如何使用 Vanilla javascript、纯 HTML 和 CSS 检测不依赖屏幕分辨率的移动设备？

Answer 1

像素实际上并不取决于屏幕的真实密度。我们使用的像素是Density independance，并且会根据屏幕进行缩放。如果您跟进Bootstrap 使用的媒体查询，您可以看到他们实际上将其设置为移动设备的 max-width: 575.98px。

// 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) { ... }