В настоящее время я использую 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
Я не могу найти твердого решения, которое работает на все.
