CSS：我可以查询以英寸为单位的实际设备宽度吗？如果不能，我如何查询截至 2015 年的所有移动设备？

Posted 2023-03-12

【中文标题】CSS：我可以查询以英寸为单位的实际设备宽度吗？如果不能，我如何查询截至 2015 年的所有移动设备？

【英文标题】：CSS: Can I query for actual device width in inches and if not, how do I query for all mobile devices as of 2015?

【发布时间】：2015-08-16 10:44:23

【问题描述】：

在我的 CSS 中，我使用 @media (max-width: 10in) 来查询移动设备。但是，该查询不适用于例如Nexus 10 或 Ipad。 我相信这是因为设备宽度是根据一些不是真正 DPI 的标准化 DPI 确定的？

那么如何使用 CSS 的媒体查询来定位 实际 设备宽度（以英寸为单位）？

如果这不起作用，我如何在不影响任何 17" 800x600 和向上？

感谢任何帮助。

编辑：一个常见的断点似乎是 1024px，它适用于除 Nexus 10 之外的所有设备；其分辨率为 1280 像素（与许多桌面显示器相同）。使用 1024 像素并将桌面样式提供给具有如此高分辨率的平板电脑会是不好的做法吗？

如果您认为我的问题严重到无法投反对票，请给出理由。

编辑 2： 我正在使用<meta name="viewport" content="width=device-width, initial-scale=1.0"> 物理单元在样式中正常工作。不过，这不会影响媒体查询。

【问题讨论】：

不要为设备设计...列表永无止境，总是在变化。在需要时放置断点...可能是 1234p 或 965px...随便。当设计因为屏幕太小而中断时...添加另一个断点。

所以我应该可以使用分辨率大于我的断点的移动设备来获得桌面版本？

【参考方案1】：

要针对 ipad 或任何其他设备（有几种不同的类型），您需要指定最小宽度和最大宽度。此外，您可能还需要指定纵向和横向宽度。在 iPad 的 css 中尝试以下操作之一：

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) 



/* portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) 



/* landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) 



/* portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) 



/* landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) 

-webkit-min-device-pixel-ratio: 2 针对视网膜设备。通过谷歌搜索，您实际上可以找到特定设备所需的确切最小和最大宽度。

希望这会有所帮助。