0

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

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

问候。

4

2 回答 2

1

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

在 Chrome 中时：

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

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

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

于 2012-10-22T19:23:09.187 回答
0

作为一个附加组件，

在处理 CSS 媒体查询时，

  • device-width和
  • width.

以iphone4为例，虽然分辨率

  • ( widthx height) 等于 (640 x 960)，

设备实际呈现

  • ( device-widthx device-height) 等于 (320 x 480)

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

帮助：不同设备的像素密度

于 2012-10-22T23:10:11.930 回答