javascript - 在 HTML5 中检测 iPad Mini

Question

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 有 uhm，一个统治他们的指导方针。好的，这就是为什么我觉得知道一个人使用的是 iPad mini 还是 iPad 2 真的很有意义的原因。按照我的推理去做你喜欢的事。

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

为什么？好吧，事实证明，大多数用户倾向于使用默认设置，因此当玩家加载第一次玩游戏是我，可能还有其他游戏设计师，希望能够做到的事情。

因此，恕我直言，这超出了粗略的手指/指南讨论，这只是 Apple 和所有其他供应商应该做的事情：允许我们唯一地识别您的设备并以不同的方式思考，而不是遵循指南。

score 252 · Accepted Answer

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

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

score 132 · Accepted Answer

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

对于 iPad Mini 和 iPad 2，您可以使用两者之一screen.availWidth或screen.availHeight它们似乎不同。

小型平板电脑

screen.availWidth = 768
screen.availHeight = 1004

平板电脑 2

screen.availWidth = 748
screen.availHeight = 1024

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

score 84 · Accepted Answer

我知道这可能是一个技术含量低的解决方案，但是因为我们似乎还没有想出其他任何东西..

我假设您已经检查了大多数其他设备，所以我看到了以下可能的情况。

您可以检查所有可能需要特殊 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 的范围是否不同？

score 74 · Accepted Answer

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

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

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

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

score 69 · Accepted Answer

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 上的屏幕点测量值更大。对于游戏，您可以将其称为校准步骤，甚至不说出来。把它作为一个开始的步骤。例如，在射击游戏中，让玩家通过捏合动作将弹药放入枪中。

score 31 · Accepted Answer

要求用户将他们的 iPad 从离地数千英尺的地方放下。然后使用内部加速度计测量 iPad 达到终端速度所需的时间。较大的 iPad 具有更大的阻力系数，并且应该比iPad Mini在更短的时间内达到极限速度。

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

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

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

score 28 · Accepted Answer

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

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

好吧，伙计们，你是对的，但这与问题没有直接关系。我需要补充第二个坏消息：也没有客户端技术可以进行“特征检测”。

score 26 · Accepted Answer

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

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

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

score 20 · Accepted Answer

好吧，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。哪个更接近整数将指示正在使用哪个设备。

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

score 18 · Accepted Answer

编辑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 是一种过度痛苦和恶化的公式。如果他们选择不允许您识别设备，那是因为，在他们的沙箱中，您不应该这样做。

我想知道，您是否正在调整纵向与横向的大小/位置？

score 11 · Accepted Answer

是的，检查陀螺仪是个好方法。你可以很容易地做到这一点

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 来测试它。

score 11 · Accepted Answer

微基准测试怎么样，在 iPad 2 上计算大约需要 X 微秒，在 iPad mini 上大约需要 Y 秒。

它可能不够准确，但 iPad mini 的芯片可能更有效地执行某些指令。

score 8 · Accepted Answer

Require all users with the iPad2 user agent to supply a photo using the built in camera and detect the resolution using the HTML File API. iPad Mini photos will be higher resolution due to the improvements in the camera.

You could also play around with creating an invisible canvas element, and convert it to a PNG/JPG using the Canvas API. I don't have any way to test it, but the resulting bits might be different due to the underlying compression algorithm and the device's pixel density.

score 7 · Accepted Answer

你总是可以问用户？！

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

score 6 · Accepted Answer

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

“你会说，什么是从格拉姆顿牧师那里拿走武器的最简单方法？”

“你问他。”

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

我知道这是一个厚颜无耻的回答，但我希望它提醒我们不必为所有事情而战。（我已经为反对票做好了准备。：P）

一些例子：

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

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

score 6 · Accepted Answer

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

与其检测 iPad Mini，为什么不检测用户在点击控件时遇到困难（或者：一直在点击控件的子区域），然后增大/缩小控件的大小以适应它们？

无论硬件如何，需要更大控制的用户都能获得它们；不需要更大控件并希望查看更多内容的用户也可以使用。这不是仅仅检测硬件那么简单，并且会有一些微妙的事情要做好，但如果仔细完成它可能会非常好。

score 5 · Accepted Answer

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

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

如果您将响应轻击的区域做得足够大以在 iPad Mini 上对用户友好，同时保持 UI 控件的视觉表示足够小以在 iPad 上视觉上令人愉悦，该怎么办？

如果您收集了足够多的不在可视区域中的点击，您可以决定在视觉上缩放 UI 控件。

作为奖励，这也适用于 iPad 上的大手。

score 5 · Accepted Answer

这里的所有解决方案都不是面向未来的（这会阻止 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 中使用真实世界的单位时，它实际上只是基于屏幕某些属性的估计。不用说，这根本不准确。

score 2 · Accepted Answer

Not tested, but instead of playing an audio file and check the balance, it could work to listen to the microphone, extract the background noise, and compute its "color" (frequency graph). If IPad Mini has a different microphone model than IPad 2, then their background color should be measurably different and some audio fingerprinting techniques might help you tell which device is in use.

I don't seriously think it could be feasible and worth the hassle in this specific case, but I think fingerprinting the background noise could be used in some apps, for example to tell you where you are when you are inside a building.

score 2 · Accepted Answer

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

检查 numberOfChannels2在 iPad mini 上返回，但在 iOS 5 和2iOS 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/

score 2 · Accepted Answer

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

该文本大小可用于形成合理尺寸的 UI，例如按钮（在 iPad Mini Retina 上测试以响应文本大小设置更改）：

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

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

score 2 · Accepted Answer

如果你创建了一堆 1"x1" 宽的 div 并将它们一个接一个地附加到父 div 直到边界框从 1 英寸跳到 2 英寸怎么办？mini 上的一英寸与 iPad 上的一英寸大小相同，对吧？

score 1 · Accepted Answer

我通过创建一个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);

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

javascript - 在 HTML5 中检测 iPad Mini

23 回答 23

小型平板电脑

平板电脑 2

Related

Reference