在HTML5中检测iPad Mini

基于关于iPad 2的道格拉斯问题new webkitAudioContext().destination.numberOfChannels，我决定进行一些测试。

检查2在iPad mini上返回的numberOfChannels ，但在装有iOS 5和2iOS 6的iPad 2上没有检查。

然后我尝试检查webkitAudioContext是否可用

var hasWebkitAudio = typeof(webkitAudioContext) === "object";
alert(hasWebkitAudio);​

同样，此处的iPad Mini和带有iOS 6的iPad 2返回true，而带有iOS 5的iPad 2返回false。

（此测试不适用于台式机，对于台式机，请检查webkitAudioContext是否为函数）。

这是供您试用的代码：http : //jsfiddle.net/sqFbc/

如果您创建了一堆1“ x1”宽的div，并将它们一个接一个地附加到父div，直到边界框从1英寸跳到2英寸，该怎么办？mini上的一英寸与iPad上的一英寸一样，对吗？

在iOS7中，用户可以进行系统范围的设置调整：当内容变得太小而无法阅读时，可以更改“ 文本大小”设置。

该文本大小可用于形成合理尺寸的UI，例如用于按钮（在iPad Mini Retina上经过测试，可对“文本大小”设置更改做出反应）：

padding: 0.5em 1em 0.5em 1em;
font: -apple-system-body;    

（示例按钮CSS，感谢jsfiddle和cssbuttongenerator）

这里的所有解决方案都不是面向未来的（这阻止了Apple发布与iPad 2具有相同屏幕尺寸但与iPad Mini具有相同分辨率的iPad）。所以我想出了一个主意：

创建一个宽度为1英寸的div并将其附加到主体。然后，我创建另一个宽度为100％的div并将其附加到主体：

var div1= $("<div/>").appendTo(document.body).width("1in");
var div2= $("<div/>").appendTo(document.body).width("100%");

jQuery width（）函数始终返回以像素为单位的值，因此您可以：

var screenSize= div2.width() / div1.width();

现在，screenSize保留了应用程序可用的大小（以英寸为单位）（但要注意舍入舍入误差）。您可以使用它来按自己的方式放置GUI。同样不要忘了之后删除无用的div。

还要注意，Kaspars提出的算法不仅在用户以全屏模式运行应用程序时不起作用，而且在Apple修补浏览器UI时也会中断。

这不会区分设备，但是正如您在编辑中解释的那样，您真正想知道的是设备屏幕尺寸。我的想法也不会告诉您确切的屏幕尺寸，但会为您提供更有用的信息，即您可以用来绘制GUI的实际尺寸（以英寸为单位）。

编辑： 使用此代码来检查它是否真正在您的设备上工作。我没有任何iPad可以测试它。

var div1= $("<div/>").appendTo(document.body).width("1in").height("1in").css("position", "absolute");
var div2= $("<div/>").appendTo(document.body).width("100%").height("100%").css("position", "absolute");
var width= div2.width() / div1.width()
var height= div2.height() / div1.height()
alert(Math.sqrt(width*width + height*height));

它会弹出一个窗口，您的屏幕尺寸以英寸为单位。它似乎可以在我的笔记本电脑上工作，并在市场上以15.4英寸的价格出售笔记本电脑屏幕时返回15.49。任何人都可以在iPad上对此进行测试并发表评论吗？不要忘记全屏运行它。

EDIT2：事实证明，我在其中进行测试的页面有一些冲突的CSS。我修复了测试代码，使其现在可以正常工作。您需要位置：div上的绝对位置，以便可以使用％的高度。

EDIT3：我做了一些研究，似乎没有办法真正获得任何设备上的屏幕尺寸。这不是操作系统所能知道的。当您在CSS中使用现实单位时，实际上只是基于屏幕某些属性的估计。不用说这根本不准确。

未经测试，但是它可以播放音频文件，提取背景噪音并计算其“颜色”（频率图），而不是播放音频文件并检查平衡情况。如果IPad Mini的麦克风型号与IPad 2不同，则其背景颜色应明显不同，并且某些音频指纹识别技术可能会帮助您确定所使用的设备。

我不认为在这种情况下可行并值得麻烦，但我认为在某些应用中可以使用背景噪音的指纹识别功能，例如，告诉您建筑物内的位置。

您可以随时询问用户？！

如果用户看不到按钮或内容，则为他们提供一种自行管理缩放的方法。您总是可以在站点上内置一些缩放按钮，以使内容（文本/按钮）更大或更小。（几乎）可以保证此功能适用于任何当前的iPad分辨率，并且可能由苹果决定采用的任何将来的分辨率。

不是回答问题，而是问题背后的问题：

您的目标是在较小的屏幕上改善用户体验。UI控件的外观是其中的一部分。UX的另一部分是应用程序的响应方式。

如果您将能够对水龙头做出反应的区域做成足够大的尺寸，以便在iPad Mini上易于使用，同时又将UI控件的视觉表示尺寸减小到足以使iPad在视觉上令人愉悦，那该怎么办？

如果您收集了不在可视区域中的足够的水龙头，则可以决定以可视方式缩放UI控件。

另外，这也适用于iPad上的大手笔。

这使我想起电影《平衡》中的一句话：

“您会说，从格拉玛顿教士手中拿走武器的最简单方法是什么？”

“你问他。”

我们非常习惯于寻求解决方案，有时，最好问一下。（有充分的理由，我们通常不这样做，但这始终是一个选择。）这里的所有建议都很出色，但是一个简单的解决方案可能是让您的程序在启动时询问他们正在使用哪个iPad。 。

我知道这是一个厚脸皮的答案，但我希望这提醒我们，我们不必为所有事情而战。（我为下一次投票做好了准备：P）

一些例子：

• 操作系统安装期间的键盘检测有时无法检测到特定的键盘，因此安装程序必须询问。
• Windows询问您连接到的网络是家庭网络还是公用网络。
• 计算机无法检测到将要使用它的人，因此它们需要用户名和密码。

祝您好运-希望您找到了一个很棒的解决方案！如果您不这样做，请不要忘记这一点。

这不是您提出的问题的答案，但我希望它比说“不要那样做”更有用：

而不是检测iPad Mini，为什么不检测用户是否很难按一下控件（或：一直按控件的子区域），并增大/缩小控件的大小以适应他们？

需要更大控件的用户无论硬件如何均可获得它们。不需要更大控件并希望看到更多内容的用户也可以得到该功能。这不仅仅是检测硬件，这很简单，而且有些微妙的事情要解决，但是如果仔细地做的话，可能会很好。

要求所有具有iPad2用户代理的用户使用内置摄像头提供照片，并使用HTML File API检测分辨率。由于相机的改进，iPad Mini照片将具有更高的分辨率。

您还可以尝试创建一个不可见的canvas元素，然后使用Canvas API将其转换为PNG / JPG。我没有任何测试方法，但是由于底层的压缩算法和设备的像素密度，最终的位可能会有所不同。

是的，这是检查陀螺仪的好方法。您可以轻松地做到这一点

https://developer.apple.com/documentation/webkitjs/devicemotionevent

或类似的东西

window.ondevicemotion = function(event) {
    if (navigator.platform.indexOf("iPad") != -1 && window.devicePixelRatio == 1) {
        var version = "";
        if (event.acceleration) version = "iPad2";
        else version="iPad Mini";

        alert(version);
    }
    window.ondevicemotion = null;
}​

没有任何iPad可以测试。

关于微基准测试，在iPad 2上计算大约需要X微秒，在iPad mini上需要大约y秒。

它可能不够准确，但是可能会有一些指导说明iPad mini的芯片效率更高。

嗯，iPad 2和iPad Mini的电池尺寸不同。

If iOS 6 supports it, you can get the current battery level from 0.0..1.0 using window.navigator.webkitBattery.level. At some level either in hardware or software, that is likely calculated as CurrentLevel / TotalLevel, where both are ints. If so, that will result in a float which is a multiple of 1 / TotalLevel. If you take lots of battery level readings from both devices, and calculate battery.level * n you might be able to find a value of n where all the results start to be close to integers, which will give you iPad2TotalLevel and iPadMiniTotalLevel.

If those two numbers are different, and mutually prime, then in production you can calculate battery.level * iPad2TotalLevel and battery.level * iPadMiniTotalLevel. Whichever is closer to an integer will indicate which device is being used.

Sorry about the number of ifs in this answer! Hopefully something better will come along.

不幸的是，目前看来这是不可能的：http : //www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

两天前，我在推特上发布了第一个检测到的问题：“ 已确认iPad Mini用户代理与iPad 2相同 ”。我已经收到数百个答案，它们说用户代理嗅探是一种不好的做法，我们应该检测功能而不是设备等。

好的，是的，您是对的，但这与问题没有直接关系。而且我需要补充第二个坏消息：没有客户端技术也无法进行“特征检测”。

这是一个疯狂的尝试，但是iPad 2和iPad mini之间的区别之一是前者没有3轴陀螺仪。也许可以使用WebKit设备方向API来查看您可以从中获得什么样的信息。

例如，此页面似乎建议您仅rotationRate在设备具有陀螺仪的情况下才能获取该值。

抱歉，我无法提供有效的POC-我无法使用iPad mini。也许对这些定向API有更多了解的人可以在这里提出建议。

我知道这可能是技术含量较低的解决方案，但是由于我们似乎还没有提出其他建议。

我假设您已经检查了大多数其他设备，因此我认为可能出现以下情况。

您可以检查所有可能需要特殊CSS /尺寸的最流行设备，如果不匹配，要么假设它是iPad mini，要么问用户？

// Device checks here
...
else {
  // it would probably be better to make this a nicer popup-thing
  var mini = prompt("Are you using a iPad mini? Press yes for a better user experience");
  // Store the result for future visits somehow.
}

我知道目前这似乎是一种愚蠢的方法，但是如果我们目前无法确定该设备是iPad mini还是iPad 2，则至少该网站可以用于执行此类操作的iPad mini设备。

您甚至可以使用以下内容：

“为了给您带来最佳的浏览体验，我们会尝试检测您的设备类型以根据您的设备自定义网站。不幸的是，由于局限性，这并非总是可能的，我们目前无法确定您使用的是iPad 2还是iPad迷你通过使用这些方法。

为了获得最佳的浏览体验，请在下面选择要使用的设备。

此选择将被存储以供将来在此设备上访问该网站。

[] iPad 2 
[*] iPad mini
[] Ancient blackberry device

”

我不完全了解您在JavaScript中可以做什么和不能做什么。我知道您可以获取用户的IP，但是可以获取用户的mac地址吗？iPad2和iPad mini的范围是否有所不同？

要求用户将iPad从地面几千英尺高处掉下来。然后使用内部加速度计测量iPad达到终端速度所花费的时间。较大的iPad具有更大的阻力系数，并且比iPad Mini可以在更短的时间内达到终端速度。

这是一些示例代码，可以帮助您入门。

function isIPadMini( var timeToReachTerminalVelocity )
{
    return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);
}

当苹果公司不可避免地以不同的外形尺寸发布下一个iPad时，您几乎肯定需要重新查看此代码。但是，我敢肯定，您将掌握一切，并为每个新版本的iPad维护此技巧。

当右声道和左声道的音量都很高时，播放立体声音频文件并比较加速度计的响应-iPad2具有单声道扬声器，而iPad Mini具有内置立体声扬声器。

需要您的帮助来收集数据，请访问此页面，并帮助我收集有关此疯狂想法的数据。我没有iPad mini，所以我真的需要您的帮助

我知道这是一个可怕的解决方案，但是目前区分iPad Mini和iPad 2的唯一方法是检查其内部版本号，并将每个内部版本号映射到相关设备。

让我举一个例子：6.0版iPad mini公开“ 10A406”作为内部版本号，而iPad 2公开“ 10A5376e”。

该值可以通过用户代理（window.navigator.userAgent）上的正则表达式轻松获得；该数字以“ Mobile/” 为前缀。

不幸的是，这是检测iPad Mini的唯一明确方法。我建议采用viewport相关方法（在支持的情况下，使用vh / vw单位）在不同屏幕尺寸上正确显示内容。

更新： 看起来这些值在创建选项卡时正在报告视口宽度和高度，并且它们在旋转时不会改变，因此该方法不能用于设备检测！

您可以在iPad Mini和iPad 2上使用它们中的一个screen.availWidth或两个，screen.availHeight因为它们似乎有所不同。

小型平板电脑

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

来源：http：//konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/