为什么媒体查询定位1024x768也针对视网膜显示的iPad？

Question

我使用以下媒体查询来定位iPad：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    /* style */
}

从我所做的测试来看，这似乎适用于所有iPad（视网膜和非视网膜）。为什么会这样？

没有视网膜的iPad是1024x768，但带视网膜的iPad是2048x1536。我的媒体查询不包含“设备像素比”属性，那么为什么这款iPad会以视网膜显示为目标？

Answer 1

虽然Retina显示器的分辨率为2048x1536，但其设备像素比为2意味着就CSS而言，分辨率仍然是1024x768（这被称为＆＃34; CSS像素＆＃34;）。在将页面渲染到显示器上时，像素只是加倍，与浏览器为了CSS目的而计算像素的方式无关。

这就是存在device-pixel-ratio / resolution媒体功能以区分特定设备的高分辨率变体的原因。