Обнаружение устройств всегда было обязательным для создания многофункциональных совместимых и адаптируемых веб-интерфейсов.
До:
Некоторые из них легко обнаружить: например, iPhoneX имеет window.devicePixelRatio, равное 3,0. Однако некоторые из них действительно сложны, потому что они одного размера.
Возьмем следующий пример: iPhone 6–7 и 8: 375 x 667 пикселей.
Один из способов отличить их - использовать трюк WebGL для чтения имени графического процессора, и, поскольку они разные, вы можете сказать:
Если имя графического процессора: Apple A9 = ›SE / 6S
Если имя графического процессора: Apple A10 = ›7
Если имя графического процессора: Apple A11 = ›8
и т.д..
Ссылку можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_debug_renderer_info
В настоящее время:
Недавно, начиная с iOS 12.2, Apple решила скрыть эту информацию и вернуть общий Apple GPU (https://51degrees.com/blog/apple-ios-122-degrades-device- точность обнаружения )
Я безуспешно пытался найти способ различить их в течение нескольких часов, прежде чем написать тест WebGL GLSL следующим образом:
1) Запишите небольшое значение (от 0 до 1) с большим количеством десятичных знаков в переменную типа float, например:
0.31622776601683794
2) Закодируйте его в пиксель RGBA
3) Запишите это в текстуру RGBA
4) Считайте это значение с помощью readPixels
Вот где происходит волшебство: графические процессоры iPhone 7 и iPhone 8 не поддерживают одинаковую точность вычислений с плавающей запятой и поэтому возвращают разные результаты!
Пример :
Https://github.com/Samsy/appleGPUDetection/blob/master/index.js
В этом примере используется THREE.js для быстрой демонстрации, но его можно преобразовать в более легкий тест WebGL.
ОБНОВЛЕНИЕ:
Это явно нелепый способ обнаружения оборудования. Это не должно быть так сложно.
Большое спасибо
