有什么方法可以在 Ionic/Angular/Cordova 堆栈中以 dp（不是 px）为单位找到屏幕尺寸？

Question

我知道如何使用文档、窗口和其他对象在 Javascript 中以像素为单位查找内部、外部、浏览器等的尺寸..

问题是，返回的宽度和高度以 px 为单位，而不是以 dp 为单位。

假设屏幕足够小以至于某些东西太大而无法容纳我想隐藏一些元素。我想以某种方式按特定顺序删除元素（有些更有用，其他用于附加信息），直到所有内容都适合水平和垂直屏幕（无滚动）。

所以我会得到屏幕大小和 ng-if 从窗口中删除对象，直到以像素为单位的剩余对象大小加在一起将小于 window.innerSize。在像素就是像素的桌面上运行良好。

但是，问题来了。在移动设备上，实际屏幕像素和显示像素之间通常有一个比率。例如。假设一个块在 css 中高 300 像素（高度：300 像素！重要）但它在实际设备上高 700 像素（使用开发者模式测量，点击他的底部）。我意识到有些是由于应用程序外部屏幕上的额外像素，例如顶部的状态栏，但其余部分是屏幕的 dp 与 px 比率。

如果没有找到窗口的 dp 尺寸的原始问题的解决方案，您将如何解决这个问题？

Answer 1

找到了，当您使用 Cordova 时，您可以使用 window.devicePixelRatio。

而且它玩起来很好。使用 window.innerHeight 获取窗口内所有内容的实际高度（也适用于覆盖您的应用程序的键盘！）。对于每个元素，它在屏幕上的高度是 his_css_height * window.devicePixelRatio。

完全翻译成我想要的。

很抱歉在这里回答我自己的问题，但我花了将近 3 个小时来寻找答案，我决定在这里发帖，然后继续我的搜索。刚刚意识到这一点，希望它可以帮助其他人:)