IBM Worklight Responsive Web App using Phonegap

Question

I am trying to make a sample hybrid mobile app using Phonegap(cordova) and IBM Worklight. I've added the iPad and iPhone as target devices.

The web content inside the app is going to be responsive one, using CSS @media queries.

The issue I am facing is that when I launch the application on iPad/iPhone, it does not recognize media queries I've written. I tried switching the CSS using device orientation approach as well as max-width approach. Still no success.

The code used in device width approach was

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

and for orientation I tried

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

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

Can anyone suggest how to make responsive webapp in IBM Worklight, phonegap

Not sure about your question, but what I understood you want to do (responsive grids) is a solved problem. Take a look Bootstrap's Grid System or Foundation's Grid System. There are many other alternatives, some provide more features than others. — cnandreu
@user2199430, have you solved your problem in this question? — Idan Adar

Raanan Avidor Raanan Avidor · Accepted Answer · 2013-03-23T20:48:29

try this:

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

IBM Worklight Responsive Web App using Phonegap

1 Answers