Question

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

应用程序中的主要元素是768像素宽，因此缩放不是一个问题。

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

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

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

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

如果我制作一个“主屏幕”版本的页面，那么它更像是一个WebApp（仍然没有使用PhoneGap）我仍然会缩放，虽然现在它有点偏：图像有点太宽，一个小条带在右边熄灭屏幕。

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

我尝试了以下所有方法： *在XCode目标设置中更改摘要 - ＆gt;设备从iPad到通用。 *在此构建方案的“运行”项目的“信息”选项卡下，使用“启用显示缩放”窗口小部件进行填充。 *我可以想到的meta'视口'标签的每一个技巧排列：设置最小/最大缩放，设置初始比例，设置宽度到固定数字等。

对于最后一项，我可以看到我在iPhone（以及HomeScreen版本）的浏览器中反映的调整，但PhoneGap从不让步：我总是得到相同的右上角。我似乎无法做出这一举动。

Answer 1

适合iPhone屏幕的适当方法不是缩放和缩小整个页面，但是要为您的应用程序使用可扩展的html结构和样式，例如，使用100%而不是768px。您应该始终避免缩放页面。将此行插入头标记：

<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)" />

Answer 2

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

EnableViewportScale：是

iPad和iPhone之间的Phonegap无法正常缩放

2 个答案: