i would prefer to write a "binding" like src="${context:/img/my.png}" but as
some poster has mentioned before named "retina" so i can use it that way:
"${retinaContext:/img/my.png}"
the only thing this binding should do is
1. to check if the window.devicePixelRatio >= 2 and if, check if a my_2x.png
pic exists on the same location has the my.png - and if so, it should take
the _2x.png
2.
but i have no idea how to write such a binding.
The Apple Doc describes three ways:
way 1 (bad one without JS enabled)
function loadImages() {
var header = document.querySelector('header');
if(window.devicePixelRatio >= 2) {
header.style.background = 'url(images/header_2x.jpg)';
}
else {
header.style.background = 'url(images/header.jpg)';
}
}
way 2 with media queries
header {
background-image: url(images/header.jpg);
background-size: cover;
height: 150px;
width: 800px;
}
/* ... more 1x CSS rules ... */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
header {
background-image: url(images/header_2x.jpg);
}
/* ... more 2x CSS rules ... */
}
way 3 with image sets
header {
background: -webkit-image-set( url(images/header.jpg) 1x,
url(images/header_2x.jpg) 2x);
height: 150px; /* height in CSS pixels */
width: 800px; /* width in CSS pixels */
}
--
View this message in context:
http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342p5715428.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
