I am trying to make a background image into a retina image using LESS CSS and RetinaJs:
in my index.html file :
<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>
in my retina.less file:
.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');
}
I have both topMenuTitle.png (320px x 40px) and
[email protected] (640px x 80px) in the same folder.
When test this code:
In Firefox i have the normal Background
In the XCode iPhone simulator I also have the normal Background
In the iPhone device, I don't have any background at all.
I'm using GWT if that matters.
Any suggestions ? Thanks.
