使用 apache cordova 的跨平台全屏 HTML5 背景图片

Question

简而言之，如何为HTML5设计全屏背景图片（保持纵横比）（以移植到不同的平台/设备）？

我正在使用 Intel XDK/Apache cordova-3.x 构建 HTML5 应用程序。从这个 link 我了解到，我可以为不同分辨率/屏幕尺寸的初始屏幕/图标配置不同的图像。

有什么方法可以像初始屏幕图像一样指定我的背景图像吗？或者我应该使用 link 中提到的响应式 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;
   }
}

使用 apache cordova 的跨平台全屏 HTML5 背景图片

Cross platform full screen HTML5 background images with apache cordova

html

cordova-3

intel-xdk