识别当今超高分辨率智能手机中的目标设备，以选择 css 文件到 运行

Question

在 whosebug.com 上的许多问题和答案中，用户建议使用 min-width 和 max-width 来识别目标设备是智能手机还是 PC（this, this, this 问题等等).像这样：

<link href="template.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">

但是在手机分辨率大幅提升的今天，大部分手机和电脑的宽度像素数相同，使用这种方法效率不高。有没有其他方法可以识别目标设备？

更新 - “像素不是像素”

这个页面有很好的相关信息：Understanding the Difference Between CSS Resolution and Device Resolution

Answer 1

根据您的描述，我认为您尝试使用多个样式表会使您的生活变得复杂。

尝试使用一个样式表并根据需要添加媒体查询。

如果您采用移动设备优先的方法，您将从适用于移动设备宽度视口的规则开始，然后在移动到平板电脑和桌面视口时添加媒体查询和额外规则或覆盖。

所以它可能是这样的：

/* rules that apply for mobile viewports */

@media(min-width:481px){
   /* rules that apply for viewports 481px and above */
}

@media(min-width:769px){
   /* rules that apply for viewports 769px and above */
}

@media(min-width:1025px){
   /* rules that apply for viewports 1025px and above */
}
@media(min-width:1201px){
   /* rules that apply for viewports 1201px and above */
}

我使用的断点没有什么特别的，它们只是为了说明。请务必自定义它以匹配您的设计。

在实践中，首先为小型移动视口创建样式。然后增加浏览器的宽度，直到布局失败。然后，检查浏览器的宽度window，创建一个匹配这个的断点，并为这个断点添加新的样式。

继续增加浏览器宽度 window 的过程，并创建新的断点和规则来修复任何样式问题，直到达到桌面宽度 window。