Question

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

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

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

Answer 1

这个问题很复杂。

您可以使用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" />

现在，640像素横幅恰好适合您的640像素屏幕。

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

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

你可以在screen.width和window.devicePixelRatio的帮助下找出你是在iPhone视网膜或iPad 2上运行，但是当你开始考虑无数的屏幕分辨率和像素密度时Android设备，任务变得几乎不可能。

解决方案是Native。

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

Tablet or Phone - Android

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

Communication between Android Java and 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();

我的代码在每个屏幕大小都运行并且看起来很棒。

Answer 2

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

Here's an article如何使用这些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);
}

希望这有帮助！

Answer 3

查看window.devicePixelRatio

Answer 4

我搜索了一遍，发现了很多半解决方案。这适用于android，iphone和网络。在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);

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

4 个答案: