以英寸为单位确定网页的宽度

Question

我有一个CSS样式表,它使用媒体查询来根据宽度的多少英寸来改变页面的显示方式(例如,如果它小于4英寸或者在手持设备上显示,它会假设更具移动性 - 友好的LAF).

我遇到的问题是它的内容.在主页上,有一个停靠式界面,可根据窗口的当前高度和宽度动态更改高度,以便文本和项目永远不会离开屏幕.但是,确定此大小的我的JS不知道样式表何时更改为手持设备或小屏幕,因此在此模式下行为继续无法预测.当页面小于或等于4英寸时,如何使用JavaScript检测,以便我可以禁用当时重新设置的扩展坞的自动调整大小？

Answer 1

这是一个非常重要的问题.

这是一个指向网站的链接,该网站有一个函数(getUnits)来获取您选择的测量单位中的当前计算样式(包括英寸)http://upshots.org/javascript/javascript-get-current-style-as-any -单元

使用此功能,您可以检查if (getUnits(document.body, "width").inch < 4).对于好奇的人来说,这个功能的工作方式是在所需的测量空间中创建一个临时元素并读取像素的比率.通过这种方式,您可以让浏览器根据自己的知识响应设备的PPI.所以这是一种polyfill window.devicePixelRatio,但浏览器主要是关于他们的PPI.但是,出于这些目的,它并不重要,因为它们将对您的英制单位CSS应用相同的谎言.