обнаружение версий iPad в JavaScript

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

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

11
browser-feature-detection ipad javascript

9 ответов

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

Как вы можете видеть в Библиотека Разработчиков Safari, event.acceleration не равно null на устройствах с гироскопом. С iPad 1, не имеет его, мы можем предположить, что это устройство для iPad 1.

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

12

Извините, но в настоящее время нет никакой разницы между 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.

обновление

похоже и разница между ними:

iPad:
  Mobile/8F190

iPad 2:
  Mobile/8F191

iPad 3:
  Mobile/9B176 (according to Philipp)
5

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

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

// 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, это блог более подробно.

3

обнаружение между 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 Displays = 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>
2

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

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"

Итак, вот вы идете.

1

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

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

0

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

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

Mozilla / 5.0 (iPad; CPU OS 5_1, как Mac OS X) AppleWebKit/534.46 (KHTML, как геккон) версия/5.1 Mobile/9b176 Safari/7534.48.3

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

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

0

PLS не полагаются на интерпретацию строки User-Agent.

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

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

0

Как насчет:

// 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

-1