Определение версии iPad в JavaScript - PullRequest
12 голосов
/ 13 сентября 2011

Можно ли проверить версию iPad (1 или 2) в веб-приложении? Поскольку пользовательский агент выглядит идентично (см. http://www.webtrends.com/Support/KnowledgeBase/SolutionDetail.aspx?Id=50140000000acbiAAA), стандартная проверка браузером здесь не работает.

Можем ли мы проверить функции (например, гироскоп) в JavaScript, которые доступны только в версии 2?

Ответы [ 9 ]

12 голосов
/ 29 июня 2012

Пожалуйста, попробуйте это скрипка . Определяет версию iPad по доступности гироскопа.

Как вы можете видеть в Safari Developer Library , event.acceleration не равно нулю на устройствах с гироскопом. Поскольку у iPad 1 его нет, мы можем предположить, что это устройство iPad 1.

Чтобы отличить iPad 2 от iPad 3, мы можем проверить свойство window.devicePixelRatio, поскольку iPad 3 имеет дисплей Retina с соотношением пикселей == 2.

5 голосов
/ 08 марта 2018

С опозданием, но с помощью расширения WEBGL_debug_renderer_info, которое является частью WebGL API , вы можете получить поставщика графического процессора и имя средства визуализации.

Комбинируя это с размерами экрана устройства, вы можете точно определить, какая это версия.

// iPad model checks.
function getiPadModel(){
    // Create a canvas element which can be used to retreive information about the GPU.
    var canvas = document.createElement("canvas");
    if (canvas) {
        var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (context) {
            var info = context.getExtension("WEBGL_debug_renderer_info");
            if (info) {
                var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
            }
        }
    }    

if(window.screen.height / window.screen.width == 1024 / 768) {
    // iPad, iPad 2, iPad Mini
    if (window.devicePixelRatio == 1) {
        switch(renderer) {
            default:
                return "iPad, iPad 2, iPad Mini";
            case "PowerVR SGX 535":
                return "iPad"
            case "PowerVR SGX 543":
                return "iPad 2 or Mini";
        }
    // iPad 3, 4, 5, Mini 2, Mini 3, Mini 4, Air, Air 2
    } else {
        switch(renderer) {
            default:
                return "iPad 3, 4, 5, Mini 2, Mini 3, Mini 4, Air, Air 2";
            case "PowerVR SGX 543":
                return "iPad 3";
            case "PowerVR SGX 554":
                return "iPad 4";
            case "Apple A7 GPU":
                return "iPad Air, Mini 2, Mini 3";
            case "Apple A8X GPU":
                return "iPad Air 2";
            case "Apple A8 GPU":
                return "iPad Mini 4";
            case "Apple A9 GPU":
                return "iPad 5, Pro 9.7";
        }
    }
// iPad Pro 10.5
} else if (window.screen.height / window.screen.width == 1112 / 834) {
    return "iPad Pro 10.5";
// iPad Pro 12.9, Pro 12.9 (2nd Gen)
} else if (window.screen.height / window.screen.width == 1366/ 1024) {
    switch(renderer) {
        default:
            return "iPad Pro 12.9, Pro 12.9 (2nd Gen)";
        case "Apple A10X GPU":
            return "iPad Pro 12.9 (2nd Gen)";
        case "Apple A9 GPU":
            return "iPad Pro 12.9";
    }
} else {
    return "Not an iPad";
}
}

Это также можно сделать для моделей iPhone, этот блог более подробно описан.

5 голосов
/ 14 сентября 2011

Извините, но в настоящее время нет никакой разницы между iPad и iPad 2.

Видите, между ними нет никакой разницы:

iPad:
 Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5

iPad2:
 Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5

И обратите внимание, что в версиях в обновлениях iOS постоянно изменяется .

UPDATE

Похоже, это разница между ними:

iPad:
  Mobile/8F190

iPad 2:
  Mobile/8F191

iPad 3:
  Mobile/9B176 (according to Philipp)
2 голосов
/ 24 июня 2016

Обнаружение между iPad 1 и 2 Шаги:

  1. Проверьте строку UA для iPad
  2. Проверка на гироскоп

Определение между iPad 2 и 3 шага:

  1. Проверьте строку UA для iPad
  2. Проверка плотности пикселей (Retina iPad 3 отображает = 2)

Определение между iPad 3 и 4 шага:

  1. Проверьте строку UA для iPad
  2. Проверка плотности пикселей (Retina Display = 2)
  3. Проверка максимальной анизотропии устройств (iPad 3 = 2, iPad 4 = 16)

Максимальная анизотропия 16 обычно указывает на современное устройство с достойной графической производительностью.

var gl;
var iPadVersion = false;

window.ondevicemotion = function(event) {
  if (!iPadVersion && navigator.platform.indexOf("iPad") != -1) {
    iPadVersion = 1;
    if (event.acceleration) iPadVersion = window.devicePixelRatio;
  }
  window.ondevicemotion = null;
}

function initWebGL(canvas) {
  gl = null;

  try {
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}

  if (!gl) {
    gl = null;
  }

  return gl;
}

function checkMaxAnisotropy() {
  var max = 0;

  var canvas = document.getElementById('webGLCanvasTest');
  gl = initWebGL(canvas);

  try {
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}

  if (gl) {
    var ext = (
      gl.getExtension('EXT_texture_filter_anisotropic') ||
      gl.getExtension('MOZ_EXT_texture_filter_anisotropic') ||
      gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
    );

    if (ext){
      max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
    }
  }
  return max;
}

function isiPad( $window ) {
  var ua = $window.navigator.userAgent || $window.navigator.vendor || $window.opera;
  return (/iPad/).test(ua);
}


function getiPadVersion( $window ) {
  if(isiPad(window) && window.devicePixelRatio === 2) {
    if(checkMaxAnisotropy() < 4) {
      iPadVersion = 3;
    } else {
      iPadVersion = 4;
    }
  }
  return iPadVersion;
}


/* BONUS CODE 
   isSmartDevice() - Detect most mobile devices
   isOldDevice() - Detect older devices that have poor video card performance
*/

function isSmartDevice( $window ) {
  var ua = $window.navigator.userAgent || $window.navigator.vendor || $window.opera;
  return (/iPhone|iPod|iPad|Silk|Android|BlackBerry|Opera Mini|IEMobile/).test(ua);
}

function isOldDevice() {
  if(isSmartDevice(window) && window.devicePixelRatio === 1 && checkMaxAnisotropy() < 4 || isiPad( window ) && checkMaxAnisotropy() < 4) {
    return true;
  } else {
    return false;
  }
}


alert('iPad Version: ' + getiPadVersion(window) );
#webGLCanvasTest {
  width: 1px;
  height: 1px;
  position: fixed;
  top: -1px;
  left: -1px;
}
<!-- Device Testing Canvas, Hide This Somewhere -->
<canvas id="webGLCanvasTest"></canvas>
1 голос
/ 27 февраля 2012

Как уже отмечали другие, это два используемых в настоящее время агента:

iPad:
 Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5

iPad2:
 Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5

Но если вы посмотрите достаточно близко, они не одинаковы, есть разница:

  • iPad имеет "Мобильный / 8F190"
  • iPad 2 имеет "Мобильный / 8F191"

Итак, поехали.

0 голосов
/ 03 июня 2013

ПОЖАЛУЙСТА, НЕ ПОДНОСИТСЯ НА User-Agent.

Это совсем не надежно: я вижу Mobile / 8J2 на iPad2 и Mobile / 9A405 на iPad1.Таким образом, разные версии iOS (и, следовательно, Safari) предупреждают разные UA на одной и той же версии iPad.

Мы должны использовать только функцию определения ускорения;либо на стороне клиента, либо на стороне сервера ( ускорение WURFL и т. д.).

0 голосов
/ 27 апреля 2012

похоже, что iPad 2 может иметь тот же код Mobile / 9B176 , что и новый iPad. Может это из-за обновления iOS?

Вот моя полная строка пользовательского агента iPad2:

Mozilla / 5.0 (iPad; CPU OS 5_1 как Mac OS X) AppleWebKit / 534.46 (KHTML, как Gecko) Версия / 5.1 Mobile / 9B176 Safari / 7534.48.3

Я не могу проверить обновленный iPad 3. Может ли кто-нибудь сказать мне, если есть какая-либо разница?

(кстати, если вы просто хотите узнать, есть ли у пользователя iPad с низким или высоким разрешением, вы можете использовать этот трюк: https://stackoverflow.com/a/10142357/974563)

0 голосов
/ 25 сентября 2011

Как насчет:

// For use within normal web clients 
var isiPad = navigator.userAgent.match(/iPad/i) != null;

// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

Также проверьте это:

http://davidwalsh.name/detect-ipad

0 голосов
/ 14 сентября 2011

При обнаружении пользовательского агента вы получаете версию приложения Safari, а не версию самого iPad, поскольку ваше веб-приложение будет работать только в среде браузера.

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

...