移动网络:如何获得物理像素大小？

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

例如:如果有人有iPhone,我想在折线图上显示N个点.如果他有一台iPad,我想显示2xN分(因为iPad的屏幕体积更大),但如果他有一些像iPhone一样体积小的新手机,但屏幕上有很多像素(如iPad),我想要显示N个点,因为这些点在物理上很小(并且更靠近在一起).

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

1> aeldron..：

---

这个问题很复杂.

您可以使用screen.width和screen.height在JavaScript中查找设备的屏幕分辨率,就像在桌面上一样.

然而,在移动设备1上,CSS像素不一定与物理屏幕像素具有1:1的比例.假设您的screen.width返回640像素的值.如果您添加的横幅正好为640像素宽,则很可能会超出手机的可用屏幕宽度.

原因是移动设备制造商将设备的默认视口设置为与设备屏幕不同的比例因子.也就是说,没有专门为移动设备设计的网页内容在不需要缩放缩放的情况下仍然显得清晰可辨.

如果使用元视口标记,则可以通过将视口宽度值设置为设备的宽度值,将视口的比例因子设置为1:1比例,如下所示:

现在640像素横幅恰好适合640像素的屏幕.

不幸的是,就目前而言,据我所知,没有真正的方法可以告诉显示您网页内容的设备的实际屏幕尺寸(以英寸或毫米为单位).至少不是在JavaScript中.虽然浏览器可以访问一些有用的信息,例如device.name或device.platform,但您无法分辨640个像素所代表的英寸数或毫米数,除非您事先知道给定设备屏幕的测量值.

对我而言,很明显为什么有人会想要一个适用于小型手机屏幕的应用程序版本,以及另一个更大的平板电脑屏幕.例如小按钮.有时他们是如此接近,你的手指会同时覆盖两个.与此同时,你不希望那些专为移动屏幕设计的胖按钮显示在漂亮的10英寸平板电脑上.

您当然可以借助screen.width和window.devicePixelRatio了解您是在iPhone视网膜还是iPad 2上运行,但是当您开始考虑Android设备上无数的屏幕分辨率和像素密度时,任务变得几乎不可能.

解决方案是Native.

在Android上,您可以使用以下线程中的代码来确定您的应用是否在大屏幕上运行:

平板电脑或手机 - Android

然后,您可以使用此其他线程上的代码使用PhoneGap从JavaScript查询您的包装器应用程序:

Android Java和Phonegap Javascript之间的通信？

对于Apple来说,它更直接:

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
    //running on an iPad
}
else {
    //iPhone or iPod
}

如果您对Android和Apple对象使用相同的命名约定,那么您的代码仍然是通用的,这就是PhoneGap的重点.例如,在我的例子中,我对我的Java和Objective-C对象和方法都使用了相同的名称.在JavaScript中我只需要调用:

window.shellApp.isTabletDevice();

我的代码在每个屏幕大小上运行并且看起来很漂亮.

2> Leon..：

---

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

这是一篇关于如何使用这些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.;
 // 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);
}

希望这可以帮助!

---

我希望就这么简单.我在两款不同的Android手机和一款运行PhoneGap的Android平板电脑上测试了这个功能,价值总是一样的:96 PPI.据我所知,"1in"是一个CSS英寸,与实际物理英寸没有真正的相关性.该值由浏览器设置,而不是由运行它的设备设置.

---

我认为文章已经更新,你可能希望相应地更新你的答案,他们似乎推荐这个:`var dpr = 1; if(window.devicePixelRatio!== undefined)dpr = window.devicePixelRatio;`

---

dpr与dpi不同,dpi是每英寸多少像素,dpr是每像素屏幕有多少像素.它通常是1.对于视网膜显示它会高于1.这一切都没有解决问题.就浏览器而言,文章很糟糕,96px = 1in.实际值取决于实际dpi.使用媒体分辨率在任何地方都无效.