在iPad上以编程方式模拟iPhone应用程序的2倍模式（或双倍比例）？

Question

我们的iPhone应用程序是使用PhoneGap构建的，并作为通用应用程序发布。通用设置对于在iPad上发现应用程序以及执行某些PhoneGap插件是必需的。

我们调整了一些高度和宽度设置，但对于某些用户来说，比例太小了。

我们没有能力重新编码应用程序并重新创建资产以实现在iPad上的最佳呈现。

相反，我们希望在iPad上模仿可用的2x模式-但仅限于iPad。当应用程序仅适用于iPhone时，2x模式是可用的，但现在它是通用应用程序，该选项显然已经消失了。

是否有一种方法可以通过HTML/CSS/JS或Objective-C来调用此功能？

谢谢！

- Crashalot

---

图片是在HTML或iOS中加载的？ - Vinodh

HTML。理想情况下，我们不需要进行任何更改，除了调用代码将应用程序置于“2x”模式——就像iPad按钮一样。 - Crashalot

Answer 1

在您的AppDelegate的didFinishLaunchingWithOptions中，做如下操作：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    ...

    // Get screen size
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    CGRect windowFrame = screenBounds;
    BOOL scale = NO;

    // Check if we are running on an iPad
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        // If this is the case, set the size to an iPhone with a 3.5 po screen, then scale
        windowFrame.size = CGSizeMake(320, 480);
        windowFrame.origin.x = (screenBounds.size.width - windowFrame.size.width) / 2.0;
        windowFrame.origin.y = (screenBounds.size.height - windowFrame.size.height) / 2.0;
        scale = YES;
    }

    self.window = [[UIWindow alloc] initWithFrame:windowFrame];
    [self.window setClipsToBounds:YES];

    if (scale) {
        self.window.transform = CGAffineTransformMakeScale(2.0, 2.0);
    }

    ... 

    return YES;
}

那么，您可以通过将UIWindow设置为iPhone屏幕大小并应用比例变换来模仿2X模式。您可能需要检查屏幕方向，但我已经尝试了一个仅限于iPhone的项目转换为通用应用程序，它可以工作。

- Rufel

Answer 2

我认为您想要扩大UI元素，而不是内容。例如，如果您将UIImageView框架设置为{ 0, 0, 100, 100 }，那么在iPad上，它仍将具有{ 0, 0, 100, 100 }的框架，并且看起来太小了。您需要做的是为iPhone和iPad分别创建单独的XIB文件。通过这种方式，您将能够根据平台创建UIView框架。

在运行时，iOS会为当前平台选择适当的XIB文件。在这里您可以找到一些关于其工作原理的文档。

下面是一个示例：

- art-divin

Answer 3

非常简单.. 你可以轻松地检查设备是否为iPhone或iPad

 var d = $('body').height():
 if(d > 548){

       $('body').css({'height':'548px','-webkit-transform': 'scale(2,2)'});

  }

WebKit Transform Scale实际上像您想要的那样缩放所有内容，并会使所有资产变得模糊等，但是body内的字体、div等比例尺缩放=)

- Dnaso

Answer 4

如果您正在HTML中加载图像，则应在CSS中设置图像，而不是直接在HTML中使用@media标记。您需要为iPhone / iPad，iPhone / iPad retina编写单独的CSS。 http://stephen.io/mediaqueries/此链接包含所有查询@media 的描述。

例如：

Index.html

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
   <div class="mynewDiv">
    ……………………………………

    ……………………………
    <div>

在 style.css 文件中

/* iPad STYLES GO HERE */

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait)  {
        .mynewDiv
        {
          background: url("../image/iPadBg.png");
        }
    }
/* iPhone5 STYLES GO HERE */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
       .mynewDiv
        {
          background: url("../image/iPhone5bg.png");
        }
}
/* iPhone STYLES GO HERE */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
       .mynewDiv
        {
          background: url("../image/iPhone5bg.png");
        }

 }

就像这样，您需要修改您的HTML和CSS。然后适当的图像将在设备中加载。

- Vinodh

---

抱歉，正如我们在问题中提到的那样，我们知道可以通过创建新的图像资源来实现这一点。我们想看看是否可以不使用新图像来实现。我们明白放大后的图像不会很清晰，但这没关系。我们的目标是模仿2x模式的功能。 - Crashalot

Answer 5

最终有效的方法是应用一个特殊的CSS类，其中定义了-webkit-transform: scale(2)和-webkit-transform-origin: top，同时通过JavaScript将高度和宽度切割50%。我们在任何设备超过一定尺寸（在我们的情况下是640像素）时应用这些修改。

- Crashalot