jquery mobile中的简单窗口大小

Question

我正在使用带有HTML5样板的JQM。我的目标（用于测试目的）是在桌面浏览器中，一个整体div，它将显示我的应用程序在真实设备上的预期大小区域。但是，在桌面浏览器中，与iphone4浏览器宽度布局相比的宽度似乎不匹配。我不想改变视口元定义，虽然我怀疑这是我的问题。有人可以向我解释一下：

为什么尺寸为640 x 960像素的div（边框为1像素，绝对位置）在这种设置的实际设备上不能反映相同尺寸的区域外观？

问候。

Answer 1

只需使用Chrome的开发人员工具即可。您可以选择欺骗您的用户代理以及不同设备的设备指标。

在Chrome中：

1. 按F12。
2. 点击右下方的齿轮图标（设置）。
3. 单击“覆盖”选项卡。
4. 您可以在此处选择更改用户代理字符串或覆盖浏览器的视口以匹配特定设备（如iPhone）。如果您更改用户代理字符串以模仿iPhone，则设备指标应自动调整为适合同一设备的大小。

请注意，您必须打开Chrome开发者工具，一旦关闭它们，您就会失去UA欺骗和设备指标欺骗。

要直接回答您的问题，不同的屏幕具有不同的像素密度，因此具有较高像素密度的屏幕将在较小的物理区域中显示相同数量的像素。

Answer 2

作为插件，

在处理CSS Media查询时，

之间存在差异

• device-width和
• width。

例如，对于iphone4，虽然分辨率

• （width x height）等于（640 x 960），

设备实际上正在展示

• （device-width x device-height）等于（320 x 480）

从here我们观察到每个CSS像素由2个屏幕分辨率像素处理。这是2种不同尺寸的结果。

此帮助：Pixel density for different devices