以编程方式模拟 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)以编程方式下载文件?
UIPageViewController - 以编程方式更改页面在 iPhone 4s/5/5s 上不起作用