Phonegap在iPad和iPhone之间不能正确缩放

问题描述：

我使用Phonegap 0.9.6为iPad开发了一个应用程序。似乎工作正常。Phonegap在iPad和iPhone之间不能正确缩放

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

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

我在我的HTML的顶部的“头”一节meta标签：

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

看来工作在iPhone浏览器罚款：我可以在浏览器指向我的本地运行的服务器，页面得到适当缩放，以适应iPhone屏幕。

如果我制作了一个“主屏幕”版本的页面，使它更像是一个WebApp（仍然没有使用PhoneGap），我仍然可以缩放，尽管现在它有点关闭：图像有点过于宽泛，很小剥去右侧卷起屏幕外。

但是当我尝试的东西在PhoneGap的我越来越不结垢可言。该页面始终显示了在正常的分辨率，所以我看到的只是它的前1/4。

我已经尝试了以下所有内容： *将摘要 - >设备从iPad更改为XCode目标设置中的Universal。 *在'info'标签下使用'enable display scaling'小部件这个构建的计划中的'运行'项目。 *我可以想到meta的'viewport'标签的每一个技巧变化：设置最小/最大比例，设置初始比例，设置宽度为固定数字等。

对于最后一项，我可以看到调整I反映在iPhone上的浏览器（以及HomeScreen版本）上，但PhoneGap从不加分：我总是得到相同的右上角。我似乎无法完成此举。

答

适合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">

这是更好地写相同的CSS对于iPhone和iPad，但如果你真的想为他们应用不同的样式每个，您可以使用媒体查询，例如，iPad的特异性的风格是这样的：

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

您还需要指定不同的CSS文件的低分辨率屏幕，Retina屏幕。仍然使用媒体查询。

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

答

你应该能够把你的PhoneGap.plist文件中的以下控制缩放槽HTML：

EnableViewportScale：YES

Phonegap在iPad和iPhone之间不能正确缩放

相关推荐