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

Posted 2023-03-12

【中文标题】以编程方式模拟 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 像素），我们就会应用这些修改。