cordova 移动的网络：如何获得物理像素大小？

bvjxkvbb 于 2022-11-15 发布在其他

关注(0)|答案(5)|浏览(154)

我正在使用jQuery移动的和PhoneGap创建一个Web应用程序。有一个图表，如果用户使用的是大屏幕，我希望在这个图表上显示更多的点，因为点是可以点击的，而且不应该太接近（物理上）。
例如：如果某人有iPhone，我想在线图上显示N个点。如果他有iPad，我想显示2xN个点（因为iPad的屏幕更大），但如果他有一些较新的Android手机，物理上像iPhone一样小，但屏幕上有很多像素（像iPad），我想显示N个点，因为这些点物理上很小（而且距离更近）。
那么有没有办法获得这些数据呢？另一种方法是确定设备是否是平板电脑。

cordova

来源：https://stackoverflow.com/questions/8456455/mobile-web-how-to-get-physical-pixel-size

5条答案

按热度按时间

camsedfj1#

这个问题是复杂的。
您可以在JavaScript中使用screen.width和screen.height来确定设备的屏幕分辨率，就像在桌面上一样。
然而，在移动的设备上，1个CSS像素不一定具有1：1的比例。假设您的screen.width传回640像素的值。如果您新增的横幅正好是640像素宽，它很可能会超过您手机的可用屏幕长度。
原因是移动的制造商将设备的默认视窗设置为与您的设备屏幕不同的比例因子。这是为了使并非专门为移动设备设计的网页内容在不需要缩放的情况下仍然清晰可见。
如果使用 meta视口标记，则可以将视口的比例因子设置为1：1比率，方法是将其宽度值设置为设备的宽度值，如下所示：

<meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" />

现在，640像素的横幅将完全适合您的640像素屏幕。
不幸的是，目前为止，据我所知，还没有真实的的方法来判断显示网页内容的设备的实际物理屏幕大小（如英寸或毫米）。至少在JavaScript中没有。虽然浏览器可以访问一些有用的信息，如device.name或device.platform，但你无法判断640像素代表多少英寸或毫米。除非您事先知道给定设备屏幕的尺寸。
在我看来，很明显，为什么有人会想要一款手机小屏幕应用和一款平板电脑大屏幕应用。比如，小按钮。有时候它们靠得很近，你的手指一次就能覆盖两个。同时，你也不希望那些专为移动的屏幕设计的大按钮出现在10英寸的漂亮平板电脑上。
当然，你可以借助screen.width和window.devicePixelRatio来确定你是在iPhone视网膜上运行还是在iPad 2上运行，但当你开始考虑Android设备上无数的屏幕分辨率和像素密度时，这项任务几乎变得不可能。
解决方案将转为本机。
在Android上，您可以使用以下线程中的代码来判断您的应用是否在大屏幕上运行：
Tablet or Phone - Android
然后，您可以使用另一个线程上的代码，使用PhoneGap从JavaScript查询 Package 器应用：
Communication between Android Java and Phonegap Javascript?
对于苹果公司来说，它甚至更直接：

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

如果你对Android和Apple对象使用相同的命名约定，你的代码仍然是通用的，这就是PhoneGap的全部意义。例如，在我的例子中，我对Java和Objective-C对象和方法使用了相同的名称。在JavaScript中，我只需要调用：

window.shellApp.isTabletDevice();

我的代码在任何尺寸的屏幕上都能运行和看起来很好。

赞(0）回复(0）举报 2022-11-15

dz6r00yl2#

你想要的是检查设备的像素密度-以DPI衡量-正如@Smamatti已经提到的，你可以通过CSS媒体查询来控制它。
Here's an article，了解如何使用CSS媒体查询来科普不同的DPI和屏幕尺寸。
UPDATE：下面是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);
}

希望这对你有帮助！

赞(0）回复(0）举报 2022-11-15

2wnc66cl3#

查看窗口。设备像素比率

赞(0）回复(0）举报 2022-11-15

nwo49xxi4#

我找遍了所有地方，找到了很多半解。这在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});

更新：我现在使用更接近这个的东西。它在更多的情况下工作。比率根据项目和方向而改变。我在body标签上使用了一个类，它将改变CSS。

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

赞(0）回复(0）举报 2022-11-15

zzwlnbp85#

我一直在研究这个问题的解决方案有一段时间了，（经过大量的测试）我想我已经通过数学找到了一条捷径。试试看：https://www.hyperspaces.co.uk/device/我很想知道它是否适合你（使用页面上的链接）代码目前模糊和域锁定，而在测试版。

赞(0）回复(0）举报 2022-11-15