Samsung Tab A8 - CSS 媒体查询 - Chrome 开发工具

Question

我正在开发一个网站。我的目标设备是 Samsung Tab A8。根据其官方网站的规格，其分辨率为 1920 x 1200。

当我使用 Google Chrome 的开发工具并将响应式宽度和高度设置为上述值时，我的网站在我的台式电脑（22 英寸屏幕）上看起来很完美。但在 Samsung Tab A8 设备上测试时，它崩溃了。

并且 Samsung Tab A8 不在 Google Dev Tools 的模拟器列表中。因此，我对媒体查询中应使用的宽度和高度感到困惑。我应该使用什么值来在我的台式电脑上的 Google Chrome 中进行测试。

Answer 1

以下是在 Chrome 和其他浏览器上模拟 Samsung Tab A8 的正确设置：

• 宽度：1280px
• 高度：800px
• 设备像素比：1.5

Answer 2

该问题是由硬件像素（物理像素）和软件像素（CSS 像素）之间的差异引起的。

它们不相同！

高分辨率移动设备具有较高的PPI（像素密度），以确保边缘清晰锐利。然而，在如此高分辨率的小显示器上阅读文本会很困难。因此，您实现了一种称为 DPR（设备像素比）的“技术”。对于大多数高分辨率设备来说，它是 2。这意味着，对于每个 CSS 像素，您都有 2 个物理像素。换句话说，您的平板电脑的 CSS 分辨率仅为 960x600px。

一个简单的解决方法是使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这确保了硬件像素与软件像素相同。请注意，您会损害用户体验，并可能使用户阅读文本变得更加困难。

Answer 3

2022 款三星 Galaxy Tab A8 的设备像素比 (DPR) 为 1.5。这款 10.5 英寸平板电脑的比例为 16:10，分辨率为 1920 x 1200 像素，像素密度约为 216 ppi。所以 CSS 方面是，宽度：1280px，高度：800px。