1

到目前为止，我只构建了一个应用程序，并且无法使用单个项目来构建 Android 和 IOS 应用程序。我必须制作两个项目，唯一真正的区别是 css 文件。我无法弄清楚如何使媒体查询正确地为同一个 css 文件中的两个设备提取正确的图像。

我想知道这是否是一个常见的解决方案，或者是否有一个可靠的 css 文件可以为 IOS 和 Android 正确加载正确的图像？

4

2 回答 2

2

媒体查询的替代方法可能是使用 Javascript 和PhoneGap 设备 API进行平台检测。

PhoneGap 文档中的示例：

// Depending on the device, a few examples are:
//   - "Android"
//   - "BlackBerry"
//   - "iOS"
//   - "webOS"
//   - "WinCE"
//   - "Tizen"
var devicePlatform = device.platform;

然后根据平台，您可以动态加载您的 css 文件。

动态加载 css 文件的示例：

var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

来源：https ://stackoverflow.com/a/9345038/702478

于 2013-04-22T15:09:36.630 回答
0

作为替代方法，我不是检测设备宽度，而是专注于检测像素比率。到目前为止，这似乎更可靠。

在 css 文件中使用基类，然后使用 2x 类：

.some-image { background-image: url(../images/1x/icons/someicon.png);
              height:32px;
              width:32px;
 }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* 2x version of image */

    .some-image { background-image: url(../images/2x/icons/someicon.png);
                  height:32px;
                  width:32px;

    }

}
于 2013-04-22T14:51:22.210 回答