Question

我们正在考虑将PhoneGap用于我们正在开发的iPad应用程序。我们更愿意在HTML5 / CSS3 / JS（我们非常熟悉）中开发它，因此PhoneGap框架显然对我们很有吸引力。

但是，我确实有一个问题。我们的客户将在iPad上使用该应用程序，但连接到高清显示器以镜像内容。问题是4：3的iPad和16：9的高清屏幕。使用纯Objective-C，我们已经阅读了有关向第二个屏幕显示不同内容和/或将其缩放的方法（以防止两侧出现黑条）。

我的问题是，我们能用PhoneGap解决这个问题吗？响应式CSS能够处理这个吗？使用CSS3媒体查询等？或者我们是否必须从头开始开发Objective-C应用程序？

干杯！

Answer 1

根据我的经验，Media Queries之类的东西在PhoneGap中工作得非常糟糕。例如，虽然PhoneGap在index.html页面中为您设置了以下内容：

<link media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" rel="stylesheet" />

无论我如何更改内容，我无法让它工作，我最终不得不使用以下javascript添加条件css：

loadDeviceStyle: function() {
  $("head").append("<link>");
  css = $("head").children(":last");
  css.attr({
    rel:  "stylesheet",
    type: "text/css",
    href: 'css/' + Utils.device() + '.css'
  });
}

这显然不太理想。我还发现viewport设置是一个主要的麻烦，并且不得不围绕它编写代码。虽然这可能是我的错误，但文档并没有帮助我解决问题，所以准备花时间在它上面。

尽管如此 - 因为PhoneGap很容易快速设置 - 我会尝试为您要做的事情创建一个概念验证。你明确回答这个问题所花费的时间肯定会减少在未来的麻烦。

使用PhoneGap在第二个屏幕（HD）上镜像iPad

1 个答案: