jquery mobile中的简单窗口大小

我正在使用带有HTML5锅炉板的JQM。我的目标（用于测试目的）是在桌面浏览器中有一个整体div，它会显示我的应用在真实设备上的预期尺寸区域。然而，在桌面浏览器中，与iPhone4浏览器宽度布局相比，宽度似乎不匹配。我不想更改视口元定义，但我怀疑这是我的问题。有人可以向我解释：jquery mobile中的简单窗口大小

为什么一个大小为640 x 960像素（边框为1像素，绝对位置）的div的大小并不反映实际设备上具有此类型的大小相同的区域外观的设置？

问候。

来源

2012-10-22 Alain

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

当在Chrome：

按F12。
点击右下方的齿轮图标（设置）。
点击Overrides标签。
在这里您可以选择更改您的用户代理字符串或覆盖浏览器的视口以匹配特定设备（如iPhone）。如果您更改用户代理字符串以模仿iPhone，则设备度量标准应自动调整为适用于同一设备的适当尺寸。

请注意，您必须保留Chrome开发者工具打开，只要你关闭它们你失去了UA欺骗和设备规格欺骗为好。

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

来源

2012-10-22 19:23:09 Jasper

感谢您的回答，这很清楚。我还发现，即使640x960分辨率的iphone4，对于设备指标，您的推荐设置也必须设置为320x480。我的目标得到满足，但我仍然不明白屏幕分辨率和像素密度之间的这种不对称。我知道屏幕大小的影响，但我仍然不明白它如何？例如，为什么我需要为分辨率更高的iphone4输入320x480？如果你有时间，你能写一个小评论吗？无论如何，我认为这是一个有效的答案。 – Alain

@Alain我想不出一个简洁的解释，但是如果你搜索谷歌，你会发现很多好的信息，例如这篇文章：http://www.quirksmode.org/blog/archives/2010/04/ a_pixel_is_not.html。我搜索了术语：'css dpi'。 – Jasper

谢谢我添加了评论，我对它有所帮助，关心。 – Alain

作为一个附加的，

当与CSS媒体打交道查询存在

device-width和
width之间的差异。

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

（width X height）等于（640×960），

所述设备实际上呈现

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

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

此帮助：Pixel density for different devices

来源

2012-10-22 23:10:11 Alain

jquery mobile中的简单窗口大小

回答

相关问题