使用Phongap的不同移动设备的背景图像大小

Question

I am developing an app for iOS and Android using Phonegap.

I want to use a background-image but since all mobile devices have different sizes my background image gets either cut or distorted.

For the splash screen (which is also a fullscreen image) I can define different images for different devices

Is there something similar that I can do for my background-image?

Answer 1

No, you can't do that with cordova configuration.

But you can css and media query:

#my-app-container {
    @media screen and (max-width: 320) {
        background-image('/iphone4s-background.jpg');
    }
    @media screen and (max-width: 420) {
        background-image('/bigger-background.jpg');
    }
    /* others */
}

Another way (but not better from my point of view) is to detect window size in js , changing then the background image from code (eg with jquery).