Question

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

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

Answer 1

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

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

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

Answer 2

我不会在真正的浏览器上测试它，但它应该可以工作：

在HTML中设置隐藏的<div id="screen" style="display:none">。

在CSS中，使用媒体查询，如：

  @media screen
  { div#screen{color: blue;} }

  @media screen and (min-width: 13in)
  { div#screen{color: red;} }

然后你可以阅读JS中的div#screen颜色来选择动作。

此外，您应该将Windows resize事件纳入JS考虑范围。

Answer 3

您所能做的就是回读已知元素的当前样式。通过查看外包装DIV的宽度等内容，您可以确定媒体查询中的哪个样式表正在使用中。

Answer 4

我认为你从错误的角度看问题。你不应该考虑英寸。您需要知道的是：给定设备和浏览器我的页面应该有多高像素？

答案在于保留一组已知的设备及其各自的像素高度。

例如，iPhone 5比iPhone 4更高，这会影响您的效果。

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

4 个答案: