jQuery DPI 변경 감지

Question

jQuery로 DPI 변경을 감지하기 위해 반나절 동안 지금 노력합니다.

시나리오는 다음과 같습니다.
MacBook Pro (Retina)와 일반 스크린이 연결되어 있습니다. 브라우저 창을 일반 브라우저에서 MacBook으로 옮길 때 DPI 변경을 감지하고 싶습니다. 해상도가 단지 물리적으로 변경하기 때문에

$(window).resize(function() { 
    if (window.devicePixelRatio && window.devicePixelRatio >= 1.3) { 
    // do retina 
    } else { 
    // do standard 
    } 
} 

및

$(document).resize(function() { 
    if (window.devicePixelRatio && window.devicePixelRatio >= 1.3) { 
    // do retina 
    } else { 
    // do standard 
    } 
} 

같은

분명히

이벤트는,이에 대한 작업을 해달라고.

이것을 구현할 방법이 있습니까?

Answer 1

두 번째 모니터에서 다른 해상도로 시도해 보았습니다.

나는 두 번째 화면에 처음부터 브라우저를 이동하고 다시 나는 당신의 접근 방식이 올바른지 있도록 브라우저의 크기를 조정해야하는 경우 : 당신이 원하지 않는 경우,

var width = screen.width; 
 
var height = screen.height; 
 

 
$(window).on('resize', function(e) { 
 
    if (screen.width !== width || screen.height !== height) { 
 
    width = screen.width; 
 
    height = screen.height; 
 
    
 
    console.log('resolution changed!'); 
 
    } 
 
});

그러나 브라우저 높이 또는 너비를 조정하려면이 이벤트가 실행되지 않습니다. 하기 위해 두 가지 기능 :이 경우 또 다른 방법은 workaraound로 사용할 수있는 이벤트를 사용

• 시간에 기초 시험 예전
• 정지에 대한 현재 브라우저 해상도이 타이머

(function ($) { 
 

 
    var width = screen.width; 
 
    var height = screen.height; 
 
    var idTimer = null; 
 

 
    $.fn.startCheckResolution = function (interval) { 
 
    interval = interval || 50; 
 
    idTimer = setInterval(function() { 
 
     if (screen.width !== width || screen.height !== height) { 
 
     width = screen.width; 
 
     height = screen.height; 
 
     $(this).trigger('resolutionChanged'); 
 
     } 
 
    }.bind(this), interval); 
 
    return this; 
 
    }; 
 

 
    $.fn.stopCheckResolution = function() { 
 
    if (idTimer != null) { 
 
     clearInterval(idTimer); 
 
     idTimer = null; 
 
    } 
 
    }; 
 

 
}(jQuery)); 
 

 
$(window).startCheckResolution(1000).on('resolutionChanged', function(e) { 
 
    console.log('Resolution changed!'); 
 
    // $(window).stopCheckResolution(); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Answer 2

어떻게 전환 이벤트와 미디어 쿼리

CSS 사용에 대한 :

body { 
    transition:font-size 1ms; 
    font-size:1em; 
} 
@media only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 192dpi) { 
     body { 
     font-size:1.1em 
     } 
} 

JS :

$("body").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
    $(document).trigger('dpiChange', {pixelRatio: window.devicePixelRatio}) 
}); 

$(document).on('dpiChange', function (e, data) { 
    if (data.pixelRatio >= 1.3) { 
    // do retina 
    console.log('retina') 
    } else { 
    // do standard 
    console.log('standard') 
    } 
}) 

JSBIN :
http://jsbin.com/siramo/1/edit?html,css,js,console

대 망막 특정 미디어 쿼리 자습서 :
https://css-tricks.com/snippets/css/retina-display-media-query/