Каковы наилучшие методы определения отношения/плотности пикселей?

В настоящее время я использую JavaScript для обнаружения мобильных устройств на своем веб-сайте, это позволяет мне обслуживать разные контенты для мобильных или настольных пользователей.

В настоящее время я использую window.devicePixelRatio и screen.width для разработки, если пользователь, если на мобильном устройстве или нет, например:

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

768px - это точка, в которой мы определяем мобильный или рабочий стол, так что 767 и ниже - мобильный, а 768 и выше - рабочий стол.

Это работает отлично, но я недавно столкнулся с проблемой с Firefox, когда Firefox увеличен и изменился, он изменил window.devicePixelRatio, поэтому:

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

Теперь это вызывает у меня проблему, потому что все пользователи, у которых браузер в браузере увеличиваются в Firefox, получают мобильную версию сайта.

Мне было интересно, знает ли кто-нибудь другой или лучший способ получить плотность пикселей, которая отделена от настольных браузеров.

Я также использую небольшое количество обнаружений User Agent, но поскольку это огромная работа, чтобы идти в ногу с постоянно меняющимся списком мобильных пользовательских агентов, я не могу зависеть как от разрешения экрана, так и от пользовательского агента в то же время.

Если у кого-нибудь есть идеи об этом и может помочь, это будет потрясающе.

UPDATE:

Я только что наткнулся на это:

window.screen.availWidth / document.documentElement.clientWidth

Этот быстрый бит математики предлагается в этом сообщении:

window.devicePixelRatio не работает в IE 10 Mobile?

Я тестировал его, и он работает в Firefox, и решает мою проблему, но, к сожалению, теперь вызывает проблему в Chrome, поэтому:

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

Я не могу найти твердого решения, которое работает на все.

Ответы

Ответ 1

Вы должны использовать подсказку производителя с помощью функции <meta name="viewport" content="width=device-width"/> или @-ms-viewport {width:device-width}. Он в основном предоставляет масштабирование по умолчанию, которое производитель устройства считает оптимальным, учитывая плотность пикселей экрана. После этого, когда вы вызываете window.innerWidth, он даст вам то, для чего предназначалось ваше исходное уравнение, но не полагаясь на измерение плотности пикселей.

Избегайте полагаться на window.devicePixelRatio для чего-либо. Его значение и ценность, которые он возвращает, в настоящее время находятся в состоянии изменения, и все, что вы делаете сейчас, основано на нем, скорее всего, скоро переломится.

Примечание: Meta viewport работает только на Android, iOS и Windows Phone 8. @-ms-viewport работает (правильно) на IE10 Metro и может вмешиваться в правильное поведение Meta viewport на Windows Phone 8.