【问题标题】:How to calculate device pixel ratio如何计算设备像素比
【发布时间】:2014-07-13 13:20:49
【问题描述】:

我想知道 -webkit-device-pixel-ratio 是如何计算的。我已经有read this。然而我无法清楚地理解它。 我还想知道是否有哪些设备使用哪种像素比率的列表。 android网站说

Android 浏览器和 WebView 支持 CSS 媒体功能,允许您为特定屏幕密度创建样式 - webkit-device-pixel-ratio CSS 媒体功能。您应用于此功能的值应为“0.75”、“1”或“1.5”,分别表示样式适用于低密度、中密度或高密度屏幕的设备。

但我发现我们需要使用 -webkit-device-pixel-ratio=2 来使 Web 应用程序兼容 768 x 1280 分辨率的屏幕。

【问题讨论】:

    标签: android html css android-layout


    【解决方案1】:

    您可以使用 javascript window.devicePixelRatio 找到像素比率

    【讨论】:

    • 这是更有效的解决方案。如果将其与 screen.width 和 screen.height 结合使用,您可以查看整个屏幕的属性。
    【解决方案2】:

    计算显示指标并获取

    DisplayMetrics dm = context.getResources().getDisplayMetrics(); int densityDpi = dm.densityDpi

    并使用 dm.xdpi 或 dm.ydpi 即像素密度

    【讨论】:

      【解决方案3】:

      根据这篇文章

      http://www.html5rocks.com/en/mobile/high-dpi/

      幻数似乎是 150。

      将物理 ppi 除以理想 ppi 150,得出设备像素比。

      例如具有 445ppi 的设备的 dpr 为 3 ->> 445 / 150

      简单的计算似乎适用于此列表中的许多项目,

      http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

      【讨论】:

      • 查看文章。也许你会更好地理解它在说什么。我从中收集到的是 150,但作者用他使用的计算把我弄丢了。
      • 或者在 Github 上研究这个应用程序 (dpi.lv) 的源代码,看看你是否可以找出它是如何计算的。或者只是使用该应用程序来查找您感兴趣的设备的 dpi。
      • @mohsensolhnia 你说得对,312/150 != 1.5 我更改了示例中使用的数字。
      • 感激不尽。找了好久终于救了我!
      • 这并不完全有效。最新的分辨率不能正确显示这个数字。例如,我的设备是 403ppi,如果我除以 150,结果是 2.69 aprox,使用 window.devicePixelRatio 我得到 2.75,更准确地说是像素比。
      【解决方案4】:

      设备像素比 (DPR) 是基于物理硬件的像素与设备无关像素之间的关系,这是一种抽象。设备像素比的值不是可以可靠计算的值,因为它基于设备制造商打算如何将一种类型的像素系统映射到另一种类型的像素系统。要可靠地获取此信息,您需要从设备请求它。

      【讨论】:

        【解决方案5】:

        您可以通过访问https://www.mydevice.io/ 找到您的许多屏幕参数

        【讨论】:

          【解决方案6】:

          问题是没有一个数据库列出了所有(甚至是最常见的)设备,因此查找给定设备的视口规范是尝试在多个数据库中的任何一个中查找设备的情况。

          这些是我遇到并使用过的数据库,它们列出了设备视口及其像素比率:

          请随意添加到上面的列表中,因为我确信那里有更全面的数据库。

          还请记住resolution / DPR = viewport,因此为了测试站点的响应能力,您通常只需要 DPR 或视口之一,并且视口本身通常更好。

          【讨论】:

            猜你喜欢
            • 2013-10-07
            • 2011-07-01
            • 2014-08-04
            • 2016-02-19
            • 1970-01-01
            • 2012-02-05
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多