在HTML5中检测iPad Mini

两天前，我在推特上发布了第一个检测到的问题:“It is 确认iPad Mini用户代理与iPad 2相同 "。 我收到了成百上千的回答说用户代理 嗅探是一种不好的做法，我们不应该检测特征 设备，等等，等等

是的，伙计们，你是对的，但这和…没有直接关系 这个问题。我需要补充第二个坏消息:没有 客户端技术使“特征检测”既不.

.

我知道这是一个糟糕的解决方案，但目前区分iPad Mini和iPad 2的唯一方法是检查其构建号，并将每个构建号与相关设备映射。

让我给你一个例子:iPad mini，版本6.0，将“10A406”暴露为构建号，而iPad 2将“10A5376e”暴露。

这个值可以很容易地通过用户代理上的正则表达式获得(window.navigator.userAgent);这个数字的前缀是“Mobile/”。

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

我知道这可能是一个低技术含量的解决方案，但由于我们似乎还没有想出任何其他方法。

我假设你已经检查了大多数其他设备，所以我认为以下场景是可能的。

你可以检查所有可能的最流行的设备，需要特殊的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 2和iPad mini的区别之一是前者没有三轴陀螺仪。也许可以使用WebKit设备定向API来查看您可以从中获得什么样的信息。

例如，这个页面似乎表明，如果设备有陀螺仪，则只能获得rotationRate值。

对不起，我不能给一个工作POC -我没有访问iPad mini。也许对这些定向api有更多了解的人可以在这里插话。

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

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有单声道扬声器，而iPad Mini有内置立体声扬声器。

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

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

这可能不够准确，但iPad mini的芯片可能在某些指令上更有效率。

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

你可以使用screen.availWidth或screen.availHeight，因为它们在iPad Mini和iPad 2中似乎是不同的。

iPad迷你

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/

不要补偿iPad mini和iPad 2之间的差异，除非你也补偿了胖手指和瘦手指之间的差异。

苹果似乎故意不让你看出区别。苹果似乎不希望我们为不同尺寸的ipad编写不同的代码。我自己不是苹果的一员，我不确定，我只是说它看起来是这样的。也许，如果开发者社区为iPad mini设计出一种奇特的检测器，苹果可能会故意在未来的iOS版本中破坏这个检测器。苹果希望你将最小目标尺寸设置为44个iOS点，iOS会以两种尺寸显示，较大的iPad尺寸和较小的iPhone/iPad mini尺寸。44分已经很慷慨了，如果用户使用的是较小的iPad，他们肯定会知道，所以可以自行补偿。

我建议回到你所说的要求探测器的原因:调整目标尺寸以满足终端用户的舒适度。通过决定在大iPad上设计一种尺寸，在小iPad上设计另一种尺寸，你就决定了所有人的手指尺寸都是一样的。如果你的设计足够紧凑，iPad 2和iPad mini的尺寸差异会产生影响，那么我和我妻子手指的大小会产生更大的影响。所以要补偿用户手指的大小，而不是iPad的型号。

我有一个关于如何测量手指大小的建议。我是一名原生iOS开发者，所以我不知道HTML5是否能够做到这一点，但以下是我在原生应用中测量手指大小的方法。我会让用户将两个物体捏在一起，然后测量它们之间的距离。手指越小，物体之间的距离就越近，你可以用这个测量方法得出一个比例系数。这将自动调整iPad大小。同一个人在iPad mini上的屏幕得分要比在iPad 2上的高。对于一款游戏，你可以将其称为校准步骤，或者干脆不叫它。把它作为一个开始的步骤。例如，在射击游戏中，玩家可以通过捏枪的动作将弹药放入枪中。

编辑1:我原来的答案，下面，是“不要这样做”。为了积极:

我认为，真正的问题与iPad X和iPad mini无关。我认为这是关于根据用户的人体工程学优化UI元素的尺寸和位置。您需要确定用户手指的大小，以便驱动UI元素的大小和定位。同样，这是并且应该在不需要实际知道您正在运行的设备的情况下实现的。让我们夸张一点:你的应用运行在一个40英寸的对角线屏幕上。不知道品牌和型号，也不知道DPI。如何调整控制的大小?

你需要在网站/游戏中显示一个控制元素的按钮。我将由您决定在哪里或如何做这件事是有意义的。

虽然用户会看到这是一个单独的按钮，但实际上它是由一个小的紧密排列的按钮组成的矩阵，这些按钮在视觉上被覆盖，看起来像一个单独的按钮图像。想象一个100 × 100像素的按钮由400个按钮组成，每个按钮5 × 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按钮可以作为应用程序的入口过程的一部分隐藏起来。例如，如果这是一款游戏，可能会有一个“Play”按钮或各种带有用户名称的按钮，或者选择他们将玩哪个关卡的方法等等。你懂的。sense_array按钮可以位于用户为了进入游戏而触碰的任何地方。

编辑2:只是注意到你可能不需要那么多感知按钮。一组同心圆或按钮排列成一个巨大的星号*可能就可以了。你必须尝试。

下面是我的老答案，我给你硬币的两面。

旧的回答:

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

如果你的按钮太小，以至于在mini上无法使用，你就需要让你的按钮变大。

如果说我在开发原生iOS应用的过程中学到了什么，那就是，试图超越苹果只会带来不必要的痛苦和恶化。如果他们选择不让你识别设备，那是因为，在他们的沙盒里，你不应该识别。

我想知道，你在调整纵向和横向的大小/位置吗?

没有测试，但它可以不播放音频文件并检查平衡，而是收听麦克风，提取背景噪声，并计算其“颜色”(频率图)。如果IPad Mini的麦克风型号与IPad 2不同，那么它们的背景颜色应该有明显的不同，一些音频指纹识别技术可能会帮助你判断使用的是哪台设备。

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

你总是可以问用户?!

如果用户不能看到按钮或内容，那么就给他们一种自己管理缩放的方法。您总是可以在站点中构建一些缩放按钮，以使内容(文本/按钮)变大/变小。这将(几乎)保证适用于任何iPad当前的分辨率，也可能适用于苹果公司决定的任何未来分辨率。

iPad 2和iPad Mini的电池大小不同。

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

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

对不起，这个答案中有太多的如果!希望会有更好的事情发生。

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

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

如果你将响应点击的区域设置得足够大，以便在iPad Mini上对用户友好，同时保持UI控件的视觉表现足够小，以便在iPad上获得视觉上的愉悦，会怎样?

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

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

这并不是对你提出的问题的回答，但我希望这比说“不要这样做”更有用:

与其检测iPad Mini，为什么不检测用户很难点击控件(或者:总是在控件的子区域中点击)，然后增加/缩小控件的大小来适应他们呢?

对于需要更大控件的用户来说，不管使用什么硬件，他们都可以获得这些控件;那些不需要更大的控制和想要看到更多内容的用户也可以得到。这不像检测硬件那么简单，还有一些细微的事情需要做对，但如果做得仔细的话，效果会很好。

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

你也可以创建一个不可见的画布元素，并使用canvas API将其转换为PNG/JPG格式。我没有任何方法来测试它，但由于底层压缩算法和设备的像素密度，结果位可能是不同的。

让用户从离地面几千英尺的高空扔下他们的iPad。然后使用内部加速度计来测量iPad达到终端速度所需的时间。较大的iPad具有较大的阻力系数，应该在比iPad迷你更短的时间内达到终端速度。

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

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

当苹果不可避免地以不同的形式发布下一代iPad时，你几乎肯定需要重新审视这段代码。但我相信你会继续跟进事情，并为每一个新版本的iPad保持这个hack。

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

“你说，什么是最简单的方法从一个语法教士那里得到武器?”

“你向他要”;

我们太习惯于为解决方案而斗争了，但有时候，问问自己可能更好。(我们通常不这么做是有充分理由的，但这总是一种选择。)这里的所有建议都很棒，但一个简单的解决方案可能是让你的程序在启动时询问他们使用的是哪台iPad。

我知道这个回答有点厚颜无耻，但我希望这能提醒我们，我们不必为所有事情而奋斗。(我已经做好了接受反对票的准备。: P)

一些例子:

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

祝你好运——我希望你能找到一个很棒的解决方案!如果你没有，不要忘记这一点。

这里的所有解决方案都不是万无一失的(这就是为什么苹果不会发布一款屏幕大小与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。此外，不要忘记删除无用的divs。

还要注意，Kaspars提出的算法不仅在用户全屏运行应用程序时不起作用，而且在苹果修补浏览器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:事实证明，我测试它的页面有一些冲突。我修复了测试代码，使其正常工作。你需要的位置:绝对的divs，所以你可以使用高度%。

EDIT3:我做了一些研究，似乎没有办法在任何设备上实际得到屏幕的大小。这不是操作系统能知道的。当你在CSS中使用一个真实的单元时，它实际上只是一个基于屏幕某些属性的估计。不用说，这一点都不准确。

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

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

然后我试着检查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;

(样本按钮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);

我需要这个画布大小，所以它的特征检测在我的用例。