픽셀 비율/밀도를 감지하는 모범 사례는 무엇입니까?

Question

현재 웹 사이트에서 모바일 장치 감지 용 JavaScript를 사용하고 있습니다. 그러면 모바일 또는 데스크톱 사용자를 위해 다른 콘텐츠를 제공 할 수 있습니다.

var isMobileScreenWidth = ((screen.width/window.devicePixelRatio) < 768) 

768px 우리가 모바일 또는 데스크톱 그래서 767과 같습니다 정의되는 지점입니다 : 모바일 장치 또는 아니라면, 그래서 같은 사용자가 경우

현재는 내가 해결해야 window.devicePixelRatio 및 screen.width를 사용 모바일 및 768 이상은 데스크톱입니다. 그래서,

이 완벽하게 작동하지만, 최근 파이어 폭스와는 window.devicePixelRatio 변경에서 확대 된 파이어 폭스,에 문제가 가로 질러 온 :

zoom = 30%, window.devicePixelRatio = 0.3 
zoom = 100%, window.devicePixelRatio = 1.0 
zoom = 300%, window.devicePixelRatio = 3.0 

이 지금 나에게 문제를 일으키는 모든 사용자있는 때문에 그들의 브라우저가 파이어 폭스에서 확대되어 사이트의 모바일 버전을 얻게하십시오.

다른 사람들이 데스크탑 브라우저와 별개의 픽셀 밀도를 얻는 다른 방법을 알고 있는지 궁금합니다.

사용자 에이전트 감지 기능을 약간 사용하지만 끊임없이 변화하는 모바일 사용자 에이전트 목록을 따라 잡는 것은 대단한 일이기 때문에 화면 해상도와 사용자 모두에 의존 할 수 없습니다. 동시에 에이전트.

누구든지 이에 대한 아이디어가 있다면 도움이 될 것입니다.

UPDATE :

난 그냥이 건너왔다 : 수학이 빠른 비트가이 게시물에 제안

window.screen.availWidth/document.documentElement.clientWidth 

는 :

window.devicePixelRatio does not work in IE 10 Mobile?

나는 그것을 테스트 한 Firefox에서 작동하고 문제를 해결하지만 불행히도 Chrome에서 문제가 발생하므로

Chrome zoom = 100%, 
window.devicePixelRatio = 1.0, 
window.screen.availWidth/document.documentElement.clientWidth = 3.0 

모든 것을 위해 작동하는 견고한 솔루션을 찾을 수없는 것 같습니다.

Answer 1

<meta name="viewport" content="width=device-width"/> 또는 @-ms-viewport {width:device-width} 기능을 통해 제조업체의 힌트를 활용해야합니다. 기본적으로 화면의 픽셀 밀도가 주어지면 장치 제조업체가 최적이라고 생각하는 기본 확대/축소를 노출합니다. 그런 다음 window.innerWidth으로 전화하면 원래 방정식이 의도 한 바를 얻을 수 있지만 픽셀 밀도를 측정하지 않아도됩니다.

무엇이든 window.devicePixelRatio에 의존하지 마십시오. 그것의 의미와 그것이 반환하는 가치는 현재 유동적 인 상태에 있으며, 당신이 지금 바로 그 주위를 기반으로하는 어떤 것도 곧 깨질 것입니다.

참고 : 메타 뷰포트는 IE10 메트로에 Android, iOS 및 Windows Phone 8 -ms-뷰포트 만 (제대로) 작동 @에서 작동하며 윈도우 폰에 적절한 메타 뷰포트 동작을 방해 할 수 있습니다 8. ​​