Jakie są sprawdzone metody wykrywania współczynnika pikseli/gęstości?

Question

Obecnie używam JavaScript do wykrywania urządzeń mobilnych w mojej witrynie, to pozwala mi wyświetlać różne treści dla użytkowników telefonów komórkowych lub stacjonarnych.

Obecnie używam window.devicePixelRatio i screen.width wypracować jeśli użytkownik czy na urządzeniu przenośnym lub nie, jak tak:

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

768px jest punkt, w którym możemy zdefiniować mobilny lub stacjonarny więc 767 i poniżej telefon komórkowy i 768 i wyżej to komputery stacjonarne.

Działa to doskonale, ale mam ostatnio natknąć problem z Firefoksem, gdy Firefox jest powiększony i obecnie zmienia window.devicePixelRatio, więc:

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

To teraz sprawia mi problem, ponieważ każdy użytkownik, który powiększ przeglądarkę na Firefoksie pobierz mobilną wersję strony.

Zastanawiam się, czy ktoś wie o innym lub lepszym sposobie uzyskania gęstości pikseli, która jest oddzielna od przeglądarek komputerowych.

Używam również niewielkiej ilości detekcji agenta użytkownika, ale ponieważ jest to ogromne zadanie, aby nadążyć za stale zmieniającą się listą mobilnych agentów użytkownika, nie jest możliwe, żebym zależał zarówno od rozdzielczości ekranu, jak i od użytkownika agent w tym samym czasie.

Jeśli ktoś ma jakieś pomysły na ten temat i może pomóc, to byłoby wspaniale.

UPDATE:

Właśnie natknąć to:

window.screen.availWidth/document.documentElement.clientWidth 

to szybkie trochę matematyki jest sugerowane w tym poście:

window.devicePixelRatio does not work in IE 10 Mobile?

Ja testowałem go i działa w Firefoksie i rozwiązuje mój problem, ale niestety teraz powoduje problem w Chrome, więc:

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

Nie mogę znaleźć solidnego rozwiązania, które działa na wszystko.

Answer 1

Powinieneś wykorzystać wskazówkę producenta za pomocą funkcji <meta name="viewport" content="width=device-width"/> lub @-ms-viewport {width:device-width}. Zasadniczo eksponuje domyślny zoom, który producent urządzenia uważa za optymalny, biorąc pod uwagę gęstość pikseli ekranu. Po wykonaniu tej czynności, gdy zadzwonisz pod numer window.innerWidth, otrzymasz informacje o oryginalnym równaniu, ale bez polegania na pomiarze gęstości pikseli.

Unikaj polegania na window.devicePixelRatio dla czegokolwiek. Jego znaczenie i wartość, którą zwraca, jest obecnie w stanie ciągłego rozwoju, a wszystko, co teraz zrobisz, najprawdopodobniej przerwie się bardzo szybko.

Uwaga: Meta rzutnia działa tylko na Androidzie, iOS i Windows Phone 8. @ -ms-rzutnia działa tylko (prawidłowo) na IE10 Metro i mogą zakłócać właściwego zachowania Meta rzutni na Windows Phone 8.