如何使用jQuery或javascript检测您的设备是iPad3还是4

How to detect if your device is an iPad3 or 4 using jQuery or javascript?

本文关键字：iPad3 还是 jQuery 何使用 javascript 检测      更新时间：2023-09-26

我一直在寻找一些方法来检测iPad3和iPad4设备。我正在动态添加元视口。我想看到桌面版本并删除桌面，iPad3和iPad4中的视口，但在移动设备上当然添加视口以查看移动版本。

请在var ApplyViewPort中检查我的初始化函数： 

var deviceDetection = function () { 
var osVersion, 
device, 
deviceType, 
userAgent, 
isSmartphoneOrTablet; 
device = (navigator.userAgent).match(/Android|iPhone|iPad|iPod/i); 
if ( /Android/i.test(device) ) { 
    if ( !/mobile/i.test(navigator.userAgent) ) { 
        deviceType = 'tablet'; 
    } else { 
        deviceType = 'phone'; 
    } 
    osVersion = (navigator.userAgent).match(/Android's+(['d'.]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace('Android ', ''); 
} else if ( /iPhone/i.test(device) ) { 
    deviceType = 'phone'; 
    osVersion = (navigator.userAgent).match(/OS's+(['d'_]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace(/_/g, '.'); 
    osVersion = osVersion.replace('OS ', ''); 
} else if ( /iPad/i.test(device) ) { 
    deviceType = 'tablet';
    osVersion = (navigator.userAgent).match(/OS's+(['d'_]+)/i); 
    osVersion = osVersion[0]; 
    osVersion = osVersion.replace(/_/g, '.'); 
    osVersion = osVersion.replace('OS ', ''); 
}
isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); 
userAgent = navigator.userAgent; 
return { 'isSmartphoneOrTablet': isSmartphoneOrTablet, 
         'device': device, 
         'osVersion': osVersion, 
         'userAgent': userAgent, 
         'deviceType': deviceType
        }; 
}();
var ApplyViewPort = {
    init: function() {
        this.metaView   = '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />';
        /// Preppend a meta viewport if it's not yet preppended
        /// Else remove the meta viewport
        if (deviceDetection.deviceType == 'tablet') {
            $('meta[name="viewport"]').remove();
            if (window.devicePixelRatio == 2) {
                $('meta[name="viewport"]').remove();
            }
        } else {
            $('head').append(this.metaView);
        }
    }
}
$(document).ready(function() {
    ApplyViewPort.init();
});

http://docs.phonegap.com/en/3.0.0rc1/cordova_device_device.md.html#Device 试试这个有device.model;它将为您提供确切的iPad版本，但您只需要使用PhoneGap更高版本

在 iPad 1 和 2 步之间进行检测：

  1. 检查适用于 iPad 的 UA 字符串
  2. 检查陀螺仪

在 iPad 2 和 3 个步骤之间进行检测：

  1. 检查适用于 iPad 的 UA 字符串
  2. 檢查像素密度(Retina iPad 3 顯示器 = 2(

在 iPad 3 和 4 个步骤之间进行检测：

  1. 检查适用于 iPad 的 UA 字符串
  2. 检查像素密度(视网膜显示器 = 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>

相关文章：