我有一个 CSS 样式表，它使用媒体查询根据页面宽度的多少英寸来更改页面的显示方式(例如，如果它小于 4 英寸或在手持设备上显示，它假定对移动设备更友好的 LAF)。
我遇到的问题是它的内容。在主页上，有一个停靠式界面，可以根据窗口的当前高度和宽度动态改变高度，使文本和元素永远不会离开屏幕。但是，我确定此大小的 JS 不知道样式表何时更改适用于手持设备或小屏幕，因此该行为在此模式下继续不可预测。 我如何使用 JavaScript 检测页面何时小于或等于 4 英寸，以便我可以禁用当时重新调整的停靠栏的自动调整大小？
最佳答案
这是一个不平凡的问题。
这是一个指向具有函数 (getUnits) 的站点的链接，可以以您选择的测量单位(包括英寸)获取当前计算的样式 https://web.archive.org/web/20120427144951/http://upshots.org:80/javascript/javascript-get-current-style-as-any-unit
使用这个函数，你可以检查if (getUnits(document.body, "width").inch < 4) .对于好奇的人来说，这个功能的工作方式是在所需的测量空间中创建一个临时元素并读取像素比率。通过这种方式，您可以让浏览器根据自己对设备 PPI 的了解做出响应。所以这是 window.devicePixelRatio 的一个 polyfill ，但是浏览器大多对他们的 PPI 撒谎。不过，出于这些目的，这并不重要，因为他们将对您的英寸单位 CSS 应用相同的谎言。
关于javascript - 确定网页的宽度(以英寸为单位)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14242125/