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 に答える