Столкнулся с проблемой верстки под ретину, раньше никогда под неё не верстал. Подскажите:
1) в каких единицах измерения лучше всего верстать, может кто какие техники или статьи подскажет для этого? Последнюю верстку делал в rem, и дублировал в px для старых браузеров, потом просто на соответствующем dpr менял размер шрифта.
2) ещё где-то слышал, что лучше dpr задавать от 1.5, но не знаю почему так, ведь ретина идет от 2 dpr, может кто пояснит?
3) задавал медиа такой:
media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 192dpi), правильно ли это? Какие есть вообще dpr, dpi? может кто даст правильные медиа для различных dpr, dpi или статью на эту тему?
4) где можна потестить под ретину кроме хрома (если нету ретина экрана)? В хроме не всегда правильно показывает.
5) ну и конечно же как правильно обрабатывать изображения для ретины если они растровые? Простой вариант видел это в js проверять:
var retina = 'devicePixelRatio' in window && window.devicePixelRatio == 2 ? true : false;
if(retina){
$(window).load(function() {
var images = $('.js-img-retina img');
images.each(function(i) {
$(this).height($(this).height() / 1.5);
});
});
}
или же в html писать так:
<img src="images/image.jpg" srcset="images/image@2x.jpg 2x" alt="img">
или же использовать тег
picture, но более старыми браузерами не поддерживается.
Средний
