以英寸为单位确定网页的宽度 [英] Determining the width of a webpage in inches

问题描述

我有一个CSS样式表，它使用媒体查询来根据宽度的多少英寸来更改页面的显示方式（例如，如果它小于4英寸或者在手持设备上显示，它会假定为更适合移动设备的LAF）。

I have a CSS stylesheet that uses media queries to change how a page is displayed based on how many inches it is in width (for instance, if it is smaller than 4 inches or being displayed on a handheld device, it assumes a more mobile-friendly LAF).

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

The problem I have is with its content. On the homepage, there is a dock-style interface that dynamically changes height based on the current height and width of the window so that the text and items never leave the screen. However, my JS that determines this size does not know when the stylesheet has changed for handheld devices or small screens, so the behavior continues unpredictably in this mode. How can I use JavaScript detect when the page is less than or equal to 4 inches so that I can disable the auto-resizing of the then-reformed dock?

推荐答案

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

It's a non-trivial problem.

这是一个指向具有某个功能的网站的链接（ getUnits ）以您选择的测量单位（包括英寸）获取当前计算的样式 http://upshots.org/javascript/javascript-get-current-style-as-any-unit

Here's a link to a site that has a function (getUnits) to get the current computed style in a measurement unit of your choice (including inches) http://upshots.org/javascript/javascript-get-current-style-as-any-unit

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

Using this function, you could check if (getUnits(document.body, "width").inch < 4). The way this function works, for the curious, is by creating a temporary element in the desired measurement space and reading off the ratio to pixels. In this way you let the browser respond based on its own knowledge the device's PPI. So this is sort of a polyfill for window.devicePixelRatio, however browsers mostly lie about their PPI. For these purposes, though, it doesn't matter since they will be applying the same lie to your inch-unit CSS.

这篇关于以英寸为单位确定网页的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！