移动网络：如何获得物理像素大小？ [英] Mobile web: how to get physical pixel size?

问题描述

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

I am creating a web app using jQuery Mobile and PhoneGap. There is a graph and if the user is using a large screen, I would like to display more points on this graph, because points are tappable and the shouldn't be too close (physically).

例如：如果有人有iPhone，我想在线图上显示N个点。如果他有一个iPad，我想显示2xN点（因为iPad有更大的屏幕），但如果他有一些较新的Android手机，物理小，像一个iPhone，但有一个有许多像素的屏幕（如iPad），我想要显示N点，因为点在物理上很小（并且更接近）。

For example: if someone has an iPhone, I want to display N points on the line graph. If he has an iPad, i want to display 2xN points (cause iPad has physically larger screen), but if he has some newer Android phone that is physically small like an iPhone but has a screen with many pixels (like an iPad), I want to display N points, because the points are physically small (and closer together).

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

So is there a way to get this data? An alternative is determining whether the device is a tablet.

推荐答案

您想要的是检查设备的像素密度 - as @Smamatti已经提到你用CSS媒体查询控制这个。

What you want is to check the device's pixel density - measured in DPI - as @Smamatti already mentioned you control this with CSS media queries.

这里有一篇文章如何应对不同的DPI和屏幕尺寸，使用那些CSS媒体查询。

Here's an article on how to cope with varying DPIs and screen sizes, using those CSS media queries.

更新：这里是javascript函数（从上面的链接），使用一个技巧来找出当前设备DPI：

UPDATE: here's the javascript function (from the above link) that uses a trick to figure out the current device DPI:

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);
}

希望这有助！

这篇关于移动网络：如何获得物理像素大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！