在HTML5中检测iPad Mini

Apple的iPad Mini在更多方面比我们想要的要小一些，是iPad 2的较小版本。在JavaScript中，该window.navigator对象为Mini和iPad 2公开了相同的值。到目前为止，我发现该差异的测试并未成功。

为什么这很重要？

由于iPad Mini和iPad 2屏幕的像素相同，但实际尺寸（英寸/厘米）不同，因此它们的PPI（每英寸像素）也不同。

为了使Web应用程序和游戏提供友好的用户界面，相对于用户的拇指或手指位置调整了某些元素的大小，因此，我们可能希望缩放某些图像或按钮以提供更好的用户体验。

到目前为止，我已经尝试过的事情（包括一些非常明显的方法）：

• window.devicepixelratio
• CSS元素宽度（以厘米为单位）
• CSS媒体查询（例如resolution和-webkit-device-pixel-ratio）
• SVG图纸以相似单位
• 在设定的时间内执行各种CSS Webkit转换，并使用来计数渲染的帧requestAnimFrame（我希望能够检测到可测量的差异）

我没有主意。你呢？

更新 感谢您到目前为止的答复。我想评论一下有人投票反对将iPad mini对比2来投票，因为Apple认为这是一项统治所有人的准则。好的，这就是我的理由，为什么我觉得知道一个人使用的是iPad mini还是iPad 2确实很有意义。

iPad mini不仅是小得多的设备（9.7英寸对7.9英寸），而且其外形尺寸允许不同的用途。除非您是Chuck Norris，否则在玩游戏时，通常会用两只手握住iPad 2 。迷你游戏机较小，但也更轻巧，可以玩游戏，您可以一只手握住它，而另一只手则可以滑动或轻按。作为我自己的游戏设计师和开发人员，我只想知道它是否是迷你游戏，因此我可以根据需要选择为玩家提供不同的控制方案（例如，在对一组玩家进行A / B测试之后）。

为什么？事实证明，大多数用户倾向于使用默认设置，因此当播放器加载游戏时，忽略虚拟指尖并在屏幕上放置一些其他基于轻击的控件（此处仅提供任意示例）。比赛的第一次是我，恐怕其他游戏设计师，很想能够做到。

因此，恕我直言，这超出了冗长的讨论/准则的讨论，而这仅仅是Apple和所有其他供应商应做的事情：允许我们唯一地标识您的设备并考虑不同的想法，而不是遵循准则。

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

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

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

您可以在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/

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

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

您可以检查所有可能需要特殊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 Mini和iPad 2的唯一方法是检查其内部版本号，并使用相关设备映射每个内部版本号。

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

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

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

tl; dr不要补偿iPad mini和iPad 2之间的差异，除非您还要补偿胖手指和瘦手指。

苹果似乎是故意不让您告诉您区别。苹果似乎不想让我们为不同大小的iPad版本编写不同的代码。我不是Apple的一员，我不确定这是什么，我只是说这就是它的样子。也许，如果开发者社区为iPad mini配备了精美的检测器，苹果可能会在将来的iOS版本中故意破坏该检测器。Apple希望您将最小目标尺寸设置为44个iOS点，iOS将以两种尺寸显示该尺寸，较大的iPad尺寸和较小的iPhone / iPad mini尺寸。44分非常慷慨，您的用户一定会知道他们是否在较小的iPad上，因此可以自行补偿。

我建议退回您陈述的要求探测器的理由：调整目标尺寸以使最终用户感到舒适。通过决定在大型iPad上设计一种尺寸，而在小型iPad上设计另一尺寸，则可以确定所有人的手指尺寸相同。如果您的设计足够紧，以至于iPad 2和iPad mini的尺寸差异会有所不同，那么我和妻子之间的手指尺寸会产生更大的差异。因此，请补偿用户的手指大小，而不是iPad型号。

我对如何测量手指大小有个建议。我是本地iOS开发人员，所以我不知道这是否可以在HTML5中完成，但是这是我在本地应用中测量手指大小的方法。我会让用户将两个对象捏在一起，然后测量它们在一起的距离。较小的手指会使物体靠得更近，您可以使用此度量来得出比例因子。这会自动针对iPad尺寸进行调整。与iPad 2相比，同一个人在iPad mini上的屏幕点尺寸要更大。在游戏中，您可以将其称为校准步骤，甚至可以不进行校准。将其作为开始步骤。例如，在射击游戏中，让玩家以捏合动作将弹药放入枪中。

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

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

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

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

不幸的是，目前看来这是不可能的：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有更多了解的人可以在这里提出建议。

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

如果iOS 6的支持的话，你可以从当前电池电量0.0..1.0使用window.navigator.webkitBattery.level。在某种程度上，无论是硬件还是软件，都可能计算为CurrentLevel / TotalLevel，其中两者均为整数。如果是这样，将导致浮点数是的倍数1 / TotalLevel。如果您从这两个设备获取大量电池电量读数，然后进行计算battery.level * n，则可能会找到n值，所有结果开始都接近整数，这将为您提供iPad2TotalLevel和iPadMiniTotalLevel。

如果这两个数字不同并且互质，则在生产中可以计算battery.level * iPad2TotalLevel和battery.level * iPadMiniTotalLevel。靠近整数的那个将指示正在使用哪个设备。

对不起，这个答案中的ifs数目！希望会有更好的结果。

编辑1： 下面我的原始答案是“不要这样做”。为了积极向上：

我认为，真正的问题与iPad X与iPad mini无关。我认为这是关于优化UI元素的尺寸和对用户人体工程学的放置。您需要确定用户手指的大小，以驱动UI元素的大小调整，甚至确定位置。同样，这确实应该并且应该在不需要真正知道您正在运行的设备的情况下实现。夸张地说：您的应用程序在40英寸对角线屏幕上运行。不知道品牌和型号或DPI。您如何调整控件的大小？

您需要显示一个按钮，该按钮是网站/游戏中的选通元素。我将由您决定在何处或如何进行此操作。

当用户将其视为单个按钮时，实际上，它将由紧密排列的小按钮矩阵组成，这些矩阵在视觉上被覆盖以显示为单个按钮图像。想象一个由400个按钮组成的100 x 100像素按钮，每个按钮5 x 5像素。您需要进行实验，以了解此处的意义以及所需的采样量。

按钮数组的可能CSS：

.sense_row {
  width:100px;
  height:5px;
  margin:0;
  padding:0;
}

.sense_button {
  float:left;
  width:3px;
  height:3px;
  padding:0px;
  margin:0px;
  background-color:#FF0;
  border:1px solid #000;
} 

和结果数组：

当用户触摸按钮阵列时，您将有效地获得用户手指接触区域的图像。然后，您可以使用所需的任何条件（可能是凭经验得出的），以得出一组数字，您可以使用这些数字来按需缩放和放置各种UI元素。

这种方法的优点在于，您不再关心要处理的设备名称或型号。您关心的只是用户手指相对于设备的大小。

我想像一下，可以将这个sense_array按钮隐藏为应用程序输入过程的一部分。例如，如果是游戏，则可能有一个“播放”按钮或带有用户名称的各种按钮，或者一种选择他们将玩的级别的方法，等等。您就明白了。sense_array按钮可以放置在用户必须触摸才能进入游戏的任何位置。

编辑2： 只是要注意，您可能不需要那么多感应按钮。一组排列成一个大星号的同心圆或按钮*可能会很好。您必须尝试。

下面我用我的旧答案，给您硬币的正反两面。

旧答案：

正确的答案是：不要这样做。这是一个坏主意。

如果您的按钮太小以致于无法在mini上使用，则需要使按钮变大。

如果我在使用本机iOS应用程序时学到了什么，那说明试图超越Apple是过度痛苦和加重的秘诀。如果他们选择不允许您识别设备，因为在他们的沙箱中，您不应该这样做。

我想知道，您是否要调整纵向和横向的尺寸/位置？

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

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

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

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可以测试。

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

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

您可以随时询问用户？！

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

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

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

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

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

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

“你问他。”

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

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

一些例子：

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

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

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

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

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

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

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

这里的所有解决方案都不是面向未来的（这阻止了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不同，则其背景颜色应明显不同，并且某些音频指纹识别技术可能会帮助您确定所使用的设备。

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

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

检查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）

我正在通过创建一个更大的画布来检测iPad mini，iPad mini可以渲染该画布，填充一个像素，然后读出颜色。iPad mini将颜色读取为“ 000000”。其他所有东西都将其渲染为填充颜色。

部分代码：

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);

我需要使用它来调整画布大小，因此在我的用例中是功能检测。