当前位置：文江博客话题详情

如何找出网页浏览者每英寸的像素数？

发布于 2024-08-20 20:36:08 字数 200 浏览 1 评论 0原文

谁能想到一种方法来发现用户的每英寸像素数？我想确保图像在网络浏览器中显示完全我需要的尺寸，因此使用分辨率（我可以从用户代理获得）和每英寸像素的组合我可以做到这。

但是，我不确定是否有任何方法可以发现用户的每英寸像素数，最好使用 JavaScript 或其他一些非侵入性方法。

有什么建议吗？

谢谢，

希杰

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

老旧海报 2024-08-27 20:36:08

您可以使用以下 JavaScript 函数来获取 DPI。

<script type="text/javascript">
   var dpi = {
      v: 0,
      get: function (noCache) {
         if (noCache || dpi.v == 0) {
            e = document.body.appendChild(document.createElement('DIV'));
            e.style.width = '1in';
            e.style.padding = '0';
            dpi.v = e.offsetWidth;
            e.parentNode.removeChild(e);
         }
         return dpi.v;
      }
   }

    alert(dpi.get(true));  // recalculate
    alert(dpi.get(false)); // use cached value
</script>

但是，我认为在 Windows 机器上它总是会返回 96 。

据我所知，操作系统无法确定视口的实际物理尺寸。因此，软件实际上很可能不可能知道现实生活中的 DPI。

然而，专业人士在某些部门确保屏幕上的 DPI 与现实生活中的 DPI 相匹配。在这种情况下，上面的 javascript 可能就足够了。

注意：
在 Opera 9、IE6 和 IE6 中测试了上述代码WinXP 和 Win2k 上的 Firefox 7 和 Firefox 3.6。

更新：
添加了 noCache 参数。但我怀疑它会有任何效果。我在上述 Windows 版本上使用 FireFox 和 Opera 的缩放功能对其进行了测试，无论缩放量是多少，他们都将 DPI 引用为“96”。看看移动设备对此有何看法将会很有趣。

You could use the following javascript function to get the DPI.

<script type="text/javascript">
   var dpi = {
      v: 0,
      get: function (noCache) {
         if (noCache || dpi.v == 0) {
            e = document.body.appendChild(document.createElement('DIV'));
            e.style.width = '1in';
            e.style.padding = '0';
            dpi.v = e.offsetWidth;
            e.parentNode.removeChild(e);
         }
         return dpi.v;
      }
   }

    alert(dpi.get(true));  // recalculate
    alert(dpi.get(false)); // use cached value
</script>

However, I think it will always return 96 on windows machines.

As far as I know, there is no way for the operating system to determine the actual physical dimensions of the viewport. So, it might very well be that it is actually impossible for software to know the real-life DPI.

However, professionals is certain branches make sure that the on screen DPI matches the real-life DPI. In those case the above javascript would probably be sufficient.

Note:
Tested the above code in Opera 9, IE6 & 7 and Firefox 3.6 on WinXP and Win2k.

Update:
Added the noCache param. But I doubt it will have any effect. I tested it with zoom in FireFox and Opera on the above mentioned windows versions and they keep quoting the DPI as '96', regardless of the amount of zoom. Would be interesting to see what mobile devices make of this.

回复收藏 0 原文

厌味 2024-08-27 20:36:08

您可以像旧的绘图包一样，显示一个可拉伸的标尺。让用户拖动虚拟标尺，直到它与他们放在屏幕上的物理标尺匹配。

对于生产使用来说，这不是一个严肃的建议，但可能是真正获得正确答案的唯一方法:(。

回复收藏 0 原文

你怎么这么可爱啊 2024-08-27 20:36:08

最安全、最简单的方法是告诉浏览器您想要的图像大小。 CSS 支持英寸和公制，因此您可以像以下示例中的任何一个一样指定图像：

<img src="image.png" style="width:15cm;height:10cm;" alt="Centimeters" />
<img src="image.png" style="width:5.9in;height:3.9in;" alt="Inches" />
<img src="image.png" style="width:150mm;height:100mm;" alt="Millimeters" />

The safest and easiest would be to tell the browser what size you want the image. CSS supports inch and metrics, so you could specify the image like any of these examples:

<img src="image.png" style="width:15cm;height:10cm;" alt="Centimeters" />
<img src="image.png" style="width:5.9in;height:3.9in;" alt="Inches" />
<img src="image.png" style="width:150mm;height:100mm;" alt="Millimeters" />

回复收藏 0 原文