Question

我们的iPhone应用程序，使用PhoneGap构建，作为通用应用程序发布。 iPad上的应用程序发现和某些PhoneGap插件的执行需要通用设置。

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

我们没有能力重新编写应用程序并重新创建资产，以便在iPad上实现最佳渲染。

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

有没有办法通过HTML / CSS / JS或Objective-C调用此功能？

谢谢！

Answer 1

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

在运行时，iOS将为当前平台选择合适的XIB文件。 Here您将能够找到有关其工作原理的文档。

在这里你可以看到一个例子：

enter image description here

Answer 2

在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的项目更改为通用应用程序并且它可以正常工作。

Answer 3

如果要以html格式加载图像。您应该使用@media标签直接在css而非html中设置图像，您需要为iPhone / iPad，iPhone / iPad视网膜单独编写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。然后将适当的图像加载到设备中

Answer 4

相当简单..你可以轻松检查设备是iphone还是pad

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

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

  }

webkit转换比例实际上可以按照您的需要扩展所有内容，并且会使您的所有资源变得模糊等等但是字体div等在身体比例范围内=）

Answer 5

最终起作用的是应用一个特殊的CSS类，它定义-webkit-transform: scale(2)和-webkit-transform-origin: top，同时将高度和宽度切成50％。通过javascript，我们在任何设备超过一定大小时应用这些修改，在我们的例子中为640 px。

以编程方式模仿iPad上iPhone应用程序的2x模式（或双倍）？

5 个答案: