Mobile 移动网络：如何获得物理像素大小？
我正在使用jQuery Mobile和PhoneGap创建一个web应用程序。有一个图形，如果用户使用的是大屏幕，我想在这个图形上显示更多的点，因为点是可点击的，并且不应该太近（物理上） 例如：如果有人有iPhone，我想在折线图上显示N个点。如果他有一台iPad，我想显示2xN个点（因为iPad的屏幕更大），但如果他有一些较新的Android手机，它的屏幕很小，像iPhone，但有很多像素（像iPad），我想显示N个点，因为这些点在物理上很小（而且距离更近）Mobile 移动网络：如何获得物理像素大小？,mobile,jquery-mobile,cordova,Mobile,Jquery Mobile,Cordova,我正在使用jQuery Mobile和PhoneGap创建一个web应用程序。有一个图形，如果用户使用的是大屏幕，我想在这个图形上显示更多的点，因为点是可点击的，并且不应该太近（物理上） 例如：如果有人有iPhone，我想在折线图上显示N个点。如果他有一台iPad，我想显示2xN个点（因为iPad的屏幕更大），但如果他有一些较新的Android手机，它的屏幕很小，像iPhone，但有很多像素（像iPad），我想显示N个点，因为这些点在物理上很小（而且距离更近） 那么有没有办法得到这些数据呢？另一
那么有没有办法得到这些数据呢？另一种方法是确定设备是否为平板电脑。您需要的是检查设备的像素密度（以DPI为单位测量），正如@Smamatti已经提到的，您可以通过CSS媒体查询进行控制 关于如何使用CSS媒体查询处理不同的DPI和屏幕大小 更新：下面是javascript函数（来自上面的链接），它使用一个技巧来计算当前设备的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);
}
希望这有帮助 这个问题很复杂 通过使用screen.width和screen.height，您可以在JavaScript中找到设备的屏幕分辨率，就像在桌面上一样 但是，在移动设备上，1个CSS像素与物理屏幕像素的比例不一定是1:1。假设您的screen.width返回640像素的值。如果你添加了一个640像素宽的横幅，它很可能会超过手机的可用屏幕宽度 原因是移动设备制造商将设备的默认视口设置为与设备屏幕不同的比例因子。也就是说，非专为移动设备设计的网页的内容仍然清晰可见，而无需缩放 如果使用元视口标记，可以通过将视口的宽度值设置为设备的宽度值，将视口的比例因子设置为1:1，如下所示：
<meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" />
window.shellApp.isTabletDevice();
我的代码在各种大小的屏幕上都能运行并且看起来很好。查看窗口。devicePixelRatio我到处搜索，找到了很多半解决方案。这适用于android、iphone和web。在CSS中，使用rem值按比例缩放
var dpi = window.devicePixelRatio || 1;
var width = $(window).width();
var ratio = 52; //Ratio of target font size to screen width screenWidth/idealFontSize
var font = Math.ceil((width / dpi / ratio)+dpi*3);
if(font < 15)
font = 15;// any less is not useable.
$("html").css({"fontSize": font});
var dpi=window.devicePixelRatio | 1；
变量宽度=$（窗口）.width（）；
var比率=52//目标字体大小与屏幕宽度的比率屏幕宽度/idealFontSize
var font=Math.ceil（（宽度/dpi/比率）+dpi*3）；
如果（字体<15）
font=15；//少一点是没有用的。
$（“html”）.css（{“fontSize”：font}）；
<body class="landscape">
<body class="portrait">
var landscapeUnitsWideThatIWantToBuildThisProjectTo = 50;
var unitsWideThatIWantToBuildThisProjectTo = 30;
var landscape = isLandscape();
var ratio = landscape ? landscapeUnitsWideThatIWantToBuildThisProjectTo : unitsWideThatIWantToBuildThisProjectTo;
var font = Math.round(width / ratio);
var Landscape Units，表示我要建设该项目，并将其设置为=50；
var Units表示我希望构建此项目，并将其设置为=30；
var scape=isLandscape（）；
var比率=景观？表示希望建设本项目的景观单元至：表示希望建设本项目的景观单元至；
var font=数学圆（宽度/比率）；
var dpr=1；如果（window.devicePixelRatio！==未定义）dpr=window.devicePixelRatiodpr不同于dpi，dpi是每英寸多少像素，dpr是屏幕每像素多少像素。通常都是1。就像视网膜显示一样，它会高于1。所有这些都不能解决问题。文章很烂，就浏览器而言96px=1。实际值取决于实际dpi。使用媒体分辨率在任何地方都不起作用。所以有css英寸和像素？不一定与实际像素或英寸对应。在css中，1in始终为96像素。回到这里，我才意识到我之前说过。悲哀的事实是：在撰写本文时，网络浏览器的创建者不想让你知道设备的真实像素密度。你也许可以用PhoneGap/Cordova等软件，但不能在纯网络浏览器中使用；戴普-HTML为1，本机为+1。web环境中的screen.width和screen.height不一定是屏幕的实际像素。在native中，您可以获得屏幕的实际像素密度，并使您的应用程序使用真实世界的英寸、点等。如果PhoneGap公开了Android API，您可能会很幸运，该API实际上可以让您获得设备像素密度。我没有看过，但这并不能解决普通浏览器的问题。这很好，只是如果52%在一个设备上是好的，但在另一个设备上是好的，如果它们具有相同的物理尺寸，但分辨率不同，你无法分辨，因为百分比将取自两个不同的宽度值。HTML在这方面受到限制，而在本机开发中，您可以访问设备显示屏的真实屏幕密度。如果您有开发本机的特权，
<body class="landscape">
<body class="portrait">
var landscapeUnitsWideThatIWantToBuildThisProjectTo = 50;
var unitsWideThatIWantToBuildThisProjectTo = 30;
var landscape = isLandscape();
var ratio = landscape ? landscapeUnitsWideThatIWantToBuildThisProjectTo : unitsWideThatIWantToBuildThisProjectTo;
var font = Math.round(width / ratio);