以编程方式模拟 iPad 上 iPhone 应用程序的 2 倍模式(或双倍模式)?

Posted

技术标签:

【中文标题】以编程方式模拟 iPad 上 iPhone 应用程序的 2 倍模式(或双倍模式)?【英文标题】:Programmatically mimic 2x mode (or double scale) of iPhone apps on iPads? 【发布时间】:2013-12-06 02:47:10 【问题描述】:

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

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

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

相反,我们想模仿 iPad 上可用的 2x 模式,但仅限于 iPad 上。 2x 模式在应用程序仅适用于 iPhone 时可用,但由于它是通用应用程序,该选项显然已不存在。

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

谢谢!

【问题讨论】:

图片是用html还是ios加载的? html。理想情况下,除了调用代码将应用置于“2x”模式之外,我们无需进行任何更改——就像 ipad 按钮一样。 【参考方案1】:

我认为您希望放大 UI 元素,而不是内容。例如,如果您将UIImageView 框架设置为 0, 0, 100, 100 ,那么在iPad 上它的框架仍然为 0, 0, 100, 100 ,并且看起来太小了。您要做的是为 iPhone 和 iPad 提供单独的 XIB 文件。这样你就可以根据平台创建UIView框架了。

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

这里你可以看到一个例子:

【讨论】:

【参考方案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 的项目更改为通用应用程序并且它可以工作。

【讨论】:

【参考方案3】:

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

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

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

  

webkit 转换比例实际上可以像您想要的那样缩放所有东西,并且会使您的所有资产变得模糊等,但字体 div 等在身体比例 =)

【讨论】:

【参考方案4】:

如果您在 html 中加载图像。您应该在 css 中而不是在 html 中直接使用 @media 标签设置图像,您需要为 iPhone/iPad、iPhone/iPadretina 编写单独的 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 。然后适当的图像将加载到设备中

【讨论】:

抱歉,正如我们在问题中提到的,我们知道这可以通过创建新的图像资产来实现。我们想看看是否有可能没有新图像。我们知道放大后的图像不会那么清晰,但这没关系。我们的目标是模仿 2x 模式的功能。【参考方案5】:

最终奏效的是应用一个特殊的 CSS 类来定义 -webkit-transform: scale(2)-webkit-transform-origin: top,同时将高度和宽度切成 50%。通过 javascript,只要任何设备超过一定大小(在我们的例子中为 640 像素),我们就会应用这些修改。

【讨论】:

以上是关于以编程方式模拟 iPad 上 iPhone 应用程序的 2 倍模式(或双倍模式)?的主要内容,如果未能解决你的问题,请参考以下文章

如何制作以编程方式使用 UISplitViewController 和 UINavigationController 的通用 iPhone / iPad 应用程序?

如何使用 IOS(iPhone、iPad)以编程方式下载文件?

iPhone模拟器:默认启动iPad?

UIPageViewController - 以编程方式更改页面在 iPhone 4s/5/5s 上不起作用

如何以编程方式设置 UITableView 部分标题(iPhone/iPad)?

从 Xcode 重置 iPad 应用程序内容和设置