使用 Phonegap 的 IBM Worklight 响应式 Web 应用程序答案

【问题标题】：IBM Worklight Responsive Web App using Phonegap使用 Phonegap 的 IBM Worklight 响应式 Web 应用程序
【发布时间】：2013-03-22 13:43:19
【问题描述】：

我正在尝试使用 Phonegap(cordova) 和 IBM Worklight 制作示例混合移动应用程序。我已将 iPad 和 iPhone 添加为目标设备。

应用内的网页内容将是响应式的，使用 CSS @media 查询。

我面临的问题是，当我在 iPad/iPhone 上启动应用程序时，它无法识别我编写的媒体查询。我尝试使用设备方向方法和最大宽度方法切换 CSS。还是没有成功。

设备宽度方法中使用的代码是

/* Portrait */
@media screen and (max-width: 768px) {
  /* Portrait styles since iPad in portrait has device width 768px */

/* Landscape */
@media screen and (max-width: 1024px) {
    /* Landscape styles since iPad in landscape has device width 1024px  */
}

我尝试了定位

/* Portrait */
@media screen and (orientation:portrait) {
  /* Portrait styles */

/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

谁能建议如何在 IBM Worklight 中制作响应式 webapp，phonegap

【问题讨论】：

不确定您的问题，但我理解您想要做的（响应式网格）是一个已解决的问题。看看Bootstrap's Grid System 或Foundation's Grid System。 other alternatives 有很多，有些提供的功能比其他的多。
@user2199430，你的问题解决了吗？

标签： cordova web-applications ibm-mobilefirst

【解决方案1】：

试试这个：

/* iPhone (landscape) */
@media only screen and (min-width : 321px) {
    /* Your style here */
}

/* iPhone (portrait) */
@media only screen and (max-width : 320px) {
    /* Your style here */
}

/* iPad (landscape) */
@media only screen  and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Your style here */
}

/* iPad (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Your style here */
}

【讨论】：