我需要在屏幕上显示物体的真实的尺寸（1毫米-20毫米）。在顶部，我有一个按钮“校准视图”。我点击它，一个模态打开，用户可以使用信用卡校准视图（把它放在屏幕上，并使用+和-按钮，他调整滑块，直到线匹配信用的高度）。用户提交校准。在此之后，对于每个元素，我运行一个函数：
信用卡宽度为85.6mm;
card__pad -是在底部和顶部具有线的容器，用户需要与信用的高度相匹配;
function mmToPx(mm) {
return parseFloat($('.card__pad').width()) * mm / 85.6
}
// 20 mm show
$('.obj').css('width', mmToPx(20))这段代码在桌面和Android上运行得很好（至少在我的手机上测试过），但在苹果设备上，对象看起来不是20 mm，而是小了一点。请告诉我这里出了什么问题，需要用什么来在苹果设备上显示正确的尺寸？？
1条答案
按热度按时间xtfmy6hx1#
需要记住的一点是，所有iOS设备都使用HiDPI screen，他们称之为“Retina显示屏”，这意味着在标准屏幕上的相同空间中有更多的物理像素。
这也意味着
1px实际上不是1px，因为现在有像素与像素的概念。显示像素。由于HiDPI上的物理像素太小，使用border: 1px solid red制作的东西会太小，而不是开发人员的意图，1px大小实际上显示在多个物理像素上以实现相同的外观。一些Android设备也使用更高的像素密度，但也许你测试的那些设备没有使用它？This SO question可能值得研究一下，但首先要确保您使用的是此 meta标记：
<meta name="viewport" content="width=device-width"/>您可以使用
window.devicePixelRatio来获取...以及设备像素比。您可能希望将其插入到您的函数中，并查看它在各种设备上返回的内容。我目前在一台装有24英寸戴尔显示器的Windows机器上，它为我返回0.8999999761581421。我知道这不是您的代码的全部答案，因为我现在无法在多个设备上进行测试，但我希望这可以为您指明正确的方向。