48 javascript css mobile dpi ppi
我正在研究一种独特的应用程序,它需要根据显示的设备生成特定分辨率的图像.因此,在常规Windows浏览器(96ppi),iPhone(163ppi),Android G1(180ppi)和其他设备上的输出是不同的.我想知道是否有办法自动检测到这一点.
我最初的研究似乎说不.我看到的唯一建议是在CSS中创建一个宽度指定为"1in"的元素,然后检查它的offsetWidth(另请参阅如何通过javascript访问屏幕显示的DPI设置？).有道理,但iPhone用这种技术骗我,说它是96ppi.
另一种方法可能是以英寸为单位获取显示尺寸,然后除以宽度(以像素为单位),但我不知道如何做到这一点.
Max*_*313 13
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
console.log(dpi_x, dpi_y);
</script>从这里抓起来http://www.infobyip.com/detectmonitordpi.php.适用于移动设备!(android 4.2.2测试过)
Pau*_*ite 11
有resolutionCSS媒体查询 - 它允许您将CSS样式限制为特定的分辨率:
但是,它仅受Firefox 3.5及更高版本,Opera 9及更高版本以及IE 9的支持.其他浏览器根本不会应用特定于分辨率的样式(尽管我没有检查过非桌面浏览器).
我提出了一种根本不需要DOM的方法
DOM可能很乱,要求你在不知道width: x !important样式表中发生了什么东西的情况下将东西附加到身体上.您还必须等待DOM准备好使用...
// Binary search, (faster then loop)
// also don't test every possible value, since it tries low, mid, and high
// http://www.geeksforgeeks.org/find-the-point-where-a-function-becomes-negative/
function findFirstPositive(b, a, i, c) {
c=(d,e)=>e>=d?(a=d+(e-d)/2,0<b(a)&&(a==d||0>=b(a-1))?a:0>=b(a)?c(a+1,e):c(d,a-1)):-1
for (i = 1; 0 >= b(i);) i *= 2
return c(i / 2, i)|0
}
var dpi = findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)
console.log(dpi)小智 6
这对我有用(但没有在手机上测试):
<body><div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div></body>
然后我放入.js: screenPPI = document.getElementById('ppitest').offsetWidth;
这让我96,这对应于我的系统的ppi.
阅读所有这些回复非常令人沮丧，因为唯一正确的答案是：不，不可能从 JavaScript/CSS 检测 DPI。通常，操作系统本身甚至不知道所连接屏幕的 DPI（并将其报告为 96 dpi，我怀疑这可能是许多人似乎相信他们在 JavaScript 中检测 DPI 的方法是准确的原因）。此外，当多个屏幕连接到形成统一显示的设备时，视口甚至单个 DOM 元素都可以跨越具有不同 DPI 的多个屏幕，这将使这些计算变得非常具有挑战性。
其他答案中描述的大多数方法几乎总是会产生 96 dpi 的输出，即使现在大多数屏幕都有更高的 DPI。例如，根据此计算器，我的 ThinkPad T14 的屏幕有 157 dpi ，但这里描述的所有方法和我的操作系统告诉我它有 96 dpi。
您为 DOM 元素分配 CSS 宽度的想法1in行不通。看起来 CSS 英寸被定义为 96 个 CSS 像素。根据我的理解，CSS 像素被定义为像素乘以devicePixelRatio，传统上是1，但可以更高或更低，具体取决于操作系统图形界面和浏览器中配置的缩放级别。
使用分辨率媒体查询的方法似乎至少在少数设备上产生了一些结果，但它们通常仍然相差超过 2 倍。尽管如此，在大多数设备上，这种方法也会产生 96 dpi 的值。
我认为最好的方法是将“嗅探器”图像的建议与设备的已知 DPI 矩阵相结合（通过用户代理和其他方法）。它不会很准确，并且维护起来会很痛苦，但如果不了解更多有关您想要创建的应用程序的信息，这是我可以提供的最佳建议。