0

我正在尝试使用LESS CSS和RetinaJs将背景图像制作成视网膜图像：

在我的 index.html 文件中：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        [...]
        <link type="text/css" rel="stylesheet/less" href="resources/css/retina.less">
        <script type="text/javascript" src="resources/js/less-1.3.0.minjs" ></script>
        [...]
    </head>
    <body>
    [...]
        <script type="text/javascript" src="resources/js/retina.js"></script>
    </body>
</html>

在我的retina.less 文件中：

.at2x(@path, @w: auto, @h: auto) {
  background-image: url("@{path}");
  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: url("@{at2x_path}");
    background-size: @w @h;
  }  
}


.topMenu {
    .at2x('../../resources/img/topMenuTitle.png');
}

我在同一个文件夹中同时拥有 topMenuTitle.png (320px x 40px) 和 topMenuTitle@2x.png (640px x 80px)。

测试此代码时：

  • 在 Firefox 我有正常的背景
  • 在 XCode iPhone 模拟器中，我也有正常的背景
  • 在 iPhone 设备中，我根本没有任何背景。
  • 如果这很重要，我正在使用 GWT。

有什么建议么 ？谢谢。

4

1 回答 1

1

较新版本的retina.less修复了该问题：

你需要更换

  background-image: url(@path);

和

   background-image: url("@{path}");

否则这将无法在 iOS 上编译

于 2012-09-16T22:55:09.910 回答