移动网站 : how to get physical pixel size?

Question

我正在使用 jQuery Mobile 和 PhoneGap 创建一个 Web 应用程序。有一个图表，如果用户使用大屏幕，我想在这个图表上显示更多的点，因为点是可点击的，并且不应该太近(物理上)。

例如:如果有人有iPhone，我想在折线图上显示N个点。如果他有 iPad，我想显示 2xN 点(因为 iPad 有更大的屏幕)，但如果他有一些更新的 Android 手机，它的尺寸像 iPhone 一样小但屏幕有很多像素(像 iPad)，我想要显示 N 个点，因为这些点在物理上很小(并且靠得更近)。

那么有没有办法获取这些数据呢？另一种方法是确定设备是否为平板电脑。

Answer 1

您想要的是检查设备的像素密度 - 以 DPI 衡量 - 正如@Smamatti 已经提到的，您可以使用 CSS 媒体查询来控制它。

Here's an article关于如何使用这些 CSS 媒体查询处理不同的 DPI 和屏幕尺寸。

更新:这是使用技巧找出当前设备 DPI 的 javascript 函数(来自上面的链接):

function getPPI(){
 // create an empty element
 var div = document.createElement("div");
 // give it an absolute size of one inch
 div.style.width="1in";
 // append it to the body
 var body = document.getElementsByTagName("body")[0];
 body.appendChild(div);
 // read the computed width
 var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
 // remove it again
 body.removeChild(div);
 // and return the value
 return parseFloat(ppi);
}

希望这有帮助!