Кроссплатформенные полноэкранные HTML5 фоновые изображения с Apache Cordova

Question

Короче говоря, как спроектировать полноэкранные фоновые изображения (сохраняя соотношение сторон) для HTML5 (для переноса на разные платформы / устройства)?

Я использую Intel XDK/ Apache cordova-3.x для создания приложения HTML5. По этой ссылке я понимаю, что могу настроить разные изображения для заставки / иконки для разных разрешений / размеров экрана.

И есть ли способ, которым я могу указать мои фоновые изображения так же, как изображение на заставке? Или я должен использовать адаптивный дизайн HTML, как упомянуто по этой ссылке?

Answer 1

Я рекомендую использовать адаптивный дизайн с использованием CSS для установки высоты и ширины ваших изображений на 100% или использовать медиа-запросы для экранов различных размеров.

Например,

/*Background Full Screen Image*/ 
body {
    background: url("images/img.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*Background Full Screen Image if the document is smaller than 300 pixels wide*/
@media screen and (max-width: 300px) {
   body {
        background: url("images/img.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
   }
}