0

Phonegap（cordova）とIBMWorklightを使用してサンプルのハイブリッドモバイルアプリを作成しようとしています。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でレスポンシブWebアプリを作成する方法を誰かが提案できますか

4

1 に答える 1

0

これを試して：

/* 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 */
}
于 2013-03-23T20:48:29.803 に答える