我正在使用 jQuery Mobile 和 PhoneGap 创建一个 Web 应用程序。有一个图表，如果用户使用大屏幕，我想在这个图表上显示更多的点，因为点是可点击的，并且不应该太近(物理上)。
例如:如果有人有iPhone，我想在折线图上显示N个点。如果他有 iPad，我想显示 2xN 点(因为 iPad 有更大的屏幕)，但如果他有一些更新的 Android 手机，它的尺寸像 iPhone 一样小但屏幕有很多像素(像 iPad)，我想要显示 N 个点，因为这些点在物理上很小(并且靠得更近)。
那么有没有办法获取这些数据呢？另一种方法是确定设备是否为平板电脑。
最佳答案
您想要的是检查设备的像素密度 - 以 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);
}
希望这有帮助!
关于移动网站 : how to get physical pixel size?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8456455/