在 HTML5 中检测 iPad Mini

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

需要您的帮助来收集数据，请访问 this page 并帮助我为这个疯狂的想法收集数据。我没有 iPad mini，所以我真的需要你的帮助

---

更新：It looks like这些值在标签创建时报告视口宽度和高度，并且它们不会在旋转时改变，因此此方法不能用于设备检测！

您可以使用 screen.availWidth 或 screen.availHeight，因为它们对于 iPad Mini 和 iPad 2 似乎有所不同。

小型平板电脑

screen.availWidth = 768
screen.availHeight = 1004

平板电脑 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 mini 通过使用这些方法。

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

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

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

"

我并不完全熟悉在 Javascript 中可以和不能在客户端执行的操作。我知道你可以获取用户的IP，但是可以获取用户的mac地址吗？ iPad2 和 iPad mini 的范围是否不同？

---

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

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

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

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

---

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

苹果似乎故意不让你分辨出区别。 Apple 似乎不希望我们为不同尺寸的 iPad 编写不同的代码。我自己不是Apple的一部分，我不确定，我只是说这就是它的样子。也许，如果开发者社区为 iPad mini 设计了一款精美的检测器，Apple 可能会在未来的 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);
}

当 Apple 不可避免地以不同的形式发布下一代 iPad 时，你几乎肯定需要重新审视这段代码。但我相信你会保持领先地位，并为每个新版本的 iPad 维护这个 hack。

---

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

两天前，我在推特上发布了第一个检测到的问题：“已确认 iPad Mini 用户代理与 iPad 2 相同”。我收到了数百个回答，说用户代理嗅探是一种不好的做法，我们应该检测功能而不是设备等。好吧，伙计们，你是对的，但它与问题没有直接关系。我需要补充第二个坏消息：也没有客户端技术可以进行“特征检测”。

---

这是一个狂野的镜头，但 iPad 2 和 iPad mini 的区别之一是前者没有 3 轴陀螺仪。也许可以使用 WebKit 设备方向 API 来查看您可以从中获得哪些信息。

例如，this page 似乎表明您只能在设备有陀螺仪的情况下获得 rotationRate 值。

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

---

好吧，iPad 2 和 iPad Mini 有不同尺寸的电池。

如果 iOS 6 支持，您可以使用 window.navigator.webkitBattery.level 从 0.0..1.0 获取当前电池电量。在硬件或软件的某个级别上，这可能计算为 CurrentLevel / TotalLevel，其中两者都是整数。如果是这样，那将产生一个浮点数，它是 1 / TotalLevel 的倍数。如果您从两个设备上获取大量电池电量读数，并计算 battery.level * n，您可能会找到一个 n 值，其中所有结果都开始接近整数，这将为您提供 iPad2TotalLevel 和 iPadMiniTotalLevel。

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

对不起，这个答案中的 if 数量！希望会有更好的东西出现。

---

编辑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;
} 

结果数组：

https://i.stack.imgur.com/azVsS.png

当用户触摸按钮阵列时，您将有效地获取用户手指接触区域的图像。然后，您可以使用您想要的任何标准（可能是根据经验得出的）以获得一组数字，您可以使用这些数字来根据您的要求缩放和定位各种 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 用户代理的用户提供照片 using the built in camera 并使用 HTML File API 检测分辨率。由于相机的改进，iPad Mini 照片的分辨率将更高。

您还可以尝试创建一个不可见的画布元素，并使用 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.49，而我的笔记本电脑屏幕以 15.4 英寸销售。任何人都可以在 iPad 上对此进行测试并发表评论吗？不要忘记全屏运行它。

EDIT2：事实证明，我测试它的页面有一些冲突的 CSS。我修复了测试代码现在可以正常工作。您需要在 div 上使用 position: absolute，以便您可以使用 % 中的高度。

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

---

未经测试，但不是播放音频文件并检查平衡，它可以收听麦克风，提取背景噪音，并计算其“颜色”（频率图）。如果 iPad Mini 的麦克风型号与 iPad 2 不同，那么它们的背景颜色应该会有明显的不同，一些音频指纹识别技术可能会帮助您分辨正在使用的设备。

我不认为在这种特定情况下这可能是可行的并且值得麻烦，但我认为指纹识别背景噪音可以在某些应用程序中使用，例如当你在建筑物内时告诉你你在哪里。

---

基于关于 iPad 2 上 new webkitAudioContext().destination.numberOfChannels 的 Douglas 问题，我决定运行一些测试。

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

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

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

同样在这里 iPad Mini 和 iPad 2 与 iOS 6 返回 true 而 iPad 2 与 iOS 5 返回 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;    

（sample 按钮 CSS，感谢 jsfiddle 和 cssbuttongenerator）

---

我通过创建画布 that is larger an iPad mini can render、填充像素然后读取颜色来检测 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);

我需要这个来调整画布大小，所以它是我用例中的特征检测。

---