iPad 和 iPhone 之间的 Phonegap 无法正确缩放答案

【问题标题】：Phonegap not scaling properly between iPad and iPhoneiPad 和 iPhone 之间的 Phonegap 无法正确缩放
【发布时间】：2011-11-26 12:12:26
【问题描述】：

我使用 Phonegap 0.9.6 为 iPad 开发了一个应用程序。似乎工作正常。

应用中的主要元素是 768 像素宽，因此无论哪种方式缩放都不是问题。

现在我正在尝试在 iPhone 上运行同样的东西。

我的 html 顶部的“head”部分中有这个元标记：

<meta name="viewport" content="user-scalable=no, width=device-width">

它似乎在 iPhone 浏览器上运行良好：我可以将浏览器指向本地运行的服务器，页面会适当缩放以适合 iPhone 屏幕。

如果我制作页面的“主屏幕”版本，使其更像是一个 WebApp（仍然不使用 PhoneGap），我仍然可以进行缩放，尽管现在它有点偏离：图像有点太宽，一条小条在右侧结束屏幕外。

但是当我在 Phonegap 中尝试时，我根本没有缩放。该页面始终以正常分辨率显示，因此我只看到了顶部的四分之一。

我已经尝试了以下所有方法： * 在 XCode 目标设置中将 Summary->Devices 从 iPad 更改为 Universal。 * 在此构建方案的“运行”项目的“信息”选项卡下使用“启用显示缩放”小部件进行处理。 * 对于元“视口”标签，我能想到的各种技巧：设置最小/最大缩放、设置初始缩放、将宽度设置为固定数字等。

对于最后一项，我可以在 iPhone（和 HomeScreen 版本）的浏览器中看到我所做的调整，但 PhoneGap 从未改变：我总是得到相同的右上角。我似乎根本无法做出这样的举动。

【问题讨论】：

标签： iphone ipad cordova resolution scaling

【解决方案1】：

适合 iPhone 屏幕的适当方法不是缩放整个页面，而是为您的应用使用可缩放的 html 结构和样式，例如，使用 100% 而不是 768px。您应该始终避免缩放页面。将这一行插入到 head 标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

最好为 iPhone 和 iPad 编写相同的 css，但如果你真的想为它们各自应用不同的样式，你可以使用媒体查询，例如，ipad 特定的样式是这样的：

<link rel="stylesheet" media="screen (max-device-width: 1024px)" href="ipad.css" />

您还需要为低分辨率屏幕和视网膜屏幕分配不同的 css 文件。仍然使用媒体查询。

<link href="static/iphone.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="static/retina.css"
    media="screen and (-webkit-device-pixel-ratio: 2)" />

【讨论】：

【解决方案2】：

您应该能够通过将以下内容放入您的 PhoneGap.plist 文件中来控制 HTML 的缩放：

EnableViewportScale：是的

【讨论】：