7

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

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

4

4 回答 4

7

这是一个不平凡的问题。

这是一个网站的链接，该网站的功能 ( 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. 但是，出于这些目的，这并不重要，因为它们会将相同的谎言应用于您的英寸单位 CSS。

于 2013-01-09T16:54:48.490 回答
1

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

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

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

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

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

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

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

于 2013-12-31T03:14:40.053 回答
0

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

于 2013-01-09T16:53:15.007 回答
0

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

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

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

于 2013-01-09T16:58:28.737 回答