使用Phonegap的IBM Worklight响应式Web应用程序-Java 学习之路

我正在尝试使用Phonegap（cordova）和IBM Worklight制作一个混合移动应用示例 . 我已将iPad和iPhone添加为目标设备 .

应用程序内部的Web内容将使用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，phonegap中制作响应式webapp

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 */
}

回复于 2024-05-11T03:35:16+08:00

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

1 回答

相关问题