我们使用 PhoneGap 构建的 iPhone 应用程序作为通用应用程序发布。在 iPad 上发现应用和执行某些 PhoneGap 插件需要通用设置。
我们调整了一些高度和宽度设置，但对于某些用户来说比例太小了。
我们没有能力重新编码应用程序并重新创建资产以在 iPad 上实现最佳渲染。
相反，我们想模仿 iPad 上可用的 2x 模式，但仅限于 iPad 上。 2x 模式在应用程序仅适用于 iPhone 时可用，但由于它是通用应用程序，该选项显然已不存在。
有没有办法通过 HTML/CSS/JS 或 Objective-C 调用此功能？
谢谢！
【问题讨论】：
标签： ios objective-c ipad cordova ios7
我认为您希望放大 UI 元素，而不是内容。例如，如果您将UIImageView 框架设置为{ 0, 0, 100, 100 }，那么在iPad 上它的框架仍然为{ 0, 0, 100, 100 }，并且看起来太小了。您要做的是为 iPhone 和 iPad 提供单独的 XIB 文件。这样你就可以根据平台创建UIView框架了。
在运行时，iOS 会为当前平台选择合适的 XIB 文件。 Here 您将能够找到一些有关其工作原理的文档。
这里你可以看到一个例子：
【讨论】：
在你的 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 的项目更改为通用应用程序并且它可以工作。
【讨论】：
相当简单..您可以轻松检查设备是iphone还是pad
var d = $('body').height():
if(d > 548){
$('body').css({'height':'548px','-webkit-transform': 'scale(2,2)'});
}
webkit 转换比例实际上可以像您想要的那样缩放所有东西，并且会使您的所有资产变得模糊等，但字体 div 等在身体比例 =)
【讨论】：
如果您在 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 。然后适当的图像将加载到设备中
【讨论】：
最终奏效的是应用一个特殊的 CSS 类来定义 -webkit-transform: scale(2) 和 -webkit-transform-origin: top，同时将高度和宽度切成 50%。通过 javascript，只要任何设备超过一定大小（在我们的例子中为 640 像素），我们就会应用这些修改。
【讨论】：