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

Question

我有一个CSS样式表，使用媒体查询根据页面宽度（例如，如果小于4英寸或在手持设备上显示），改变页面的显示方式以适应移动端。但是，我的问题在于它的内容。主页上有一个类似于码头的接口，根据窗口的当前高度和宽度动态更改高度，以便文本和项目永远不会离开屏幕。然而，我用于确定此大小的JS不知道样式表何时已更改 以适应手持设备或小屏幕，因此在此模式下行为将不可预测。如何使用JavaScript检测页面是否小于或等于4英寸，以便禁用自动调整大小的码头？

- Ky -

---

在当前的浏览器中，你真的做不到。浏览器根本无法准确告诉你它们的屏幕尺寸，而且通常它们自己也不知道。你所能做的就是编写适应（报告的）像素尺寸的代码，并相信设备制造商已经设计出合理的屏幕。（有时候，比如iPad Mini，制造商也会失败。） - Pointy

如果码头不“可见”，最好检查一下，并关闭调整大小。 - Shmiddty

@Pointy，这并不完全正确。每个设备都有一定的分辨率（PPI），如果你知道你正在使用哪个设备，你就知道该设备上有多少像素构成一英寸。虽然这绝非最佳方法，但应该是可行的。 - Shmiddty

@Shmiddty 嗯，你可以积累一些用户代理字符串的数据库，但例如在iPad Mini的情况下，即使这样也行不通 - 没有已知的方法可以区分iPad Mini和iPad 2。而且你也无法判断我是否将笔记本电脑连接到了一个小型液晶屏幕上。 - Pointy

@Shmiddty，“dock”始终可见。当屏幕变为<= 4英寸时，它只是改变形状，看起来像一个垂直列表。 - Ky -

Answer 1

这是一个不容易解决的问题。

这里有一个网站链接，其中包含一个函数（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应用相同的谎言。

- Plynx

---

那个脚本根本就不起作用。所有浏览器都将1in视为与屏幕尺寸无关的96px的同义词。 - Pointy

@Pointy 我认为重点在于这种方法不关心浏览器是否正确；它与CSS测量同步。如果发明了一种准确测量的浏览器，那么这种方法仍然有效。 - Ky -

@Pointy 我认为这是一种个人偏见和不建设性的评论，特别是考虑到这个解决方案似乎在所有情况下都能正常工作。 - Ky -

Answer 2

我没有在真正的浏览器上测试过，但它应该可以运行：

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

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

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

然后你可以在JS中读取

的颜色以选择操作。 此外，你应该考虑窗口调整大小事件。

- Walkinraven

---

只是想指出我已经更改了你的CSS示例。之前，在屏幕宽度恰好为13英寸时，屏幕的颜色不清楚。现在，默认情况下是蓝色，在13英寸或更宽时为红色。 - Ky -

Answer 3

你能做的只是读取已知元素的当前样式。通过查看外层包装 DIV 的宽度等信息，你可以确定媒体查询中正在使用哪个样式表。

- Diodeus - James MacFarlane

---

浏览器会误报物理尺寸。如果你用“cm”或“in”来设置元素的样式，浏览器会应用一个固定的像素比例，可能与实际情况没有任何关系。据我所知，所有移动和桌面浏览器都会报告一英寸包含96个像素，而不考虑实际屏幕大小。 - Pointy

很多人确实这样做，但我发现iOS 5+ Safari在英寸测量方面做得很好。 - Ky -

@Supuhstar http://jsbin.com/ovider/1 - 所有浏览器都将1in解释为96px，而不考虑实际屏幕点密度。在这方面，只有当屏幕实际上每英寸有96个物理像素时，Safari才能做到“良好的工作”。 - Pointy

实际上，如果屏幕恰好具有192物理像素密度，则Safari可以做得很好，因为它报告1英寸=96像素，然后将任何非Retina感知的内容按2缩放。但由于屏幕实际上具有326ppi，这甚至不是远近相等的。 - abarnert

Answer 4

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

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

例如，iPhone 5比iPhone 4更高，这会影响你想要达到的效果。

- Halcyon

---

浏览器检测很糟糕。此外，我想测量宽度而不是高度。 - Ky -

这是无关的建议。如果您正在检查功能或能力，浏览器检测是不好的，您应该使用特性检测。在这里，您想要一份设备及其相应屏幕尺寸的列表。这是一个无关的问题。 - Halcyon

那么你的解决方案是创建一个JavaScript数据库，包含所有曾经制造过的iOS、Android、Symbian、Blackberry、OS X、Linux和Windows设备及其操作系统版本的所有可能组合？ - Ky -