CSS检查屏幕分辨率

Question

有没有可靠的方法来检查使用CSS的屏幕分辨率？我说可靠，因为我一直在使用最小分辨率媒体查询，当我的桌面PC上使用我的网站时，该查询似乎正在工作。但是，当与平板电脑（特别是Windows Surface Pro 2）一起使用时，报告的屏幕DPI不是您所期望的，并且我的媒体查询不起作用。

最终我想要实现的是当屏幕DPI超过某个值时显示更大的按钮。否则按钮看起来很小。所以我有这样的CSS：

@media screen {
    .ui-top-pane {
        min-height: 135px;
        width: 100%;
    }
}

@media screen and (min-resolution: 192dpi), 
            (-webkit-min-device-pixel-ratio: 2) {
    .ui-top-pane {
        min-height: 175px;
        width: 100%;
    }
}

但即使Surface Pro 2的分辨率为1920 x 1080，屏幕尺寸为10＆＃34;，报告的DPI仅为96.因此，这似乎是一种不可靠的检测方式。如果是这种情况，有人可以提出更好的方法吗？

非常感谢。