在HTML5中检测iPad Mini

Question

Apple的iPad Mini是iPad 2的小型克隆,其方式比我们想要的更多.在JavaScript中,该window.navigator对象为Mini和iPad 2公开了相同的值.到目前为止,我的测试检测差异并未导致成功.

为什么这很重要？

由于iPad Mini和iPad 2屏幕的像素相同但实际尺寸(英寸/厘米)不同,因此它们的PPI(每英寸像素数)不同.

对于提供友好用户界面的web应用和游戏,某些元素相对于用户的拇指或手指位置进行大小调整,因此,我们可能想要缩放某些图像或按钮以提供更好的用户体验.

到目前为止我尝试过的事情(包括一些非常明显的方法):

• window.devicepixelratio
• CSS元素宽度,单位为cm
• CSS媒体查询(例如resolution和-webkit-device-pixel-ratio)
• 类似单位的SVG图纸
• 在设定的时间内进行各种CSS webkit变换并计算渲染帧requestAnimFrame(我希望能够检测到可测量的差异)

我是新鲜的想法.你呢？

更新 感谢目前为止的回复.我想评论人们投票反对检测iPad mini而不是2,因为苹果公司已经呃,这是一个统治它们的指导方针.好的,这就是我的理由,为什么我觉得在这个世界上真的有意义的是知道一个人是在使用iPad mini还是2.并且我的理由是你喜欢的.

iPad mini不仅是一个小得多的设备(9.7英寸对7.9英寸),但它的外形允许不同的用途.除非你是查克诺里斯,否则iPad 2通常在游戏时用双手握住.迷你体积更小,但它也更轻巧,允许您用一只手拿着它并使用另一只手轻扫或点击或诸如此类的游戏.作为一名游戏设计师和开发者,我只想知道它是否是迷你游戏,所以如果我愿意,我可以选择为玩家提供不同的控制方案(例如在与一组玩家进行A/B测试之后).

为什么？嗯,事实证明,大多数用户都倾向于使用默认设置,因此当播放器加载时,请忽略虚拟拇指杆并在屏幕上放置其他基于抽头的控件(这里只是给出一个任意示例)比赛的第一次是我,恐怕其他游戏设计师,很想能够做到.

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

Answer 1

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

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

Answer 2

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

您可以使用两种screen.availWidth或screen.availHeight因为他们似乎是为iPad Mini和iPad 2的不同.

小型平板电脑

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/

Answer 3

我知道这可能是一个有点低技术的解决方案,但因为我们似乎无法提出任何其他的东西..

我假设你已经检查了大多数其他设备,所以我看到以下场景可能.

您可以检查所有可能最受欢迎的设备,这些设备需要特殊的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之间有区别吗？

Answer 4

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

让我举个例子:iPad mini 6.0版正在曝光" 10A406"作为内部版本号,而iPad 2正在曝光" 10A5376e".

通过用户代理(window.navigator.userAgent)上的正则表达式可以很容易地获得该值; 该数字以" Mobile/" 为前缀.

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

Answer 5

tl; dr不要弥补iPad mini和iPad 2之间的差异,除非你还要补偿脂肪和瘦小的手指.

Apple似乎故意不让你说出差异.Apple似乎不希望我们为不同尺寸版本的iPad编写不同的代码.我自己不是Apple的一部分,我不确定这一点,我只是说这就是它的样子.也许,如果开发者社区为iPad迷你推出了一款精美的探测器,Apple可能会在未来版本的iOS中故意破坏该探测器.Apple希望您将最小目标大小设置为44个iOS点,iOS将以两种尺寸显示,iPad尺寸较大,iPhone/iPad迷你尺寸较小.44分是非常慷慨的,你的用户肯定会知道他们是否在较小的iPad上,所以可以自己补偿.

我建议您回过头来询问检测器的原因:调整目标尺寸以确保最终用户的舒适度.通过决定在大型iPad上设计一种尺寸,在小型iPad上设计另一种尺寸,您决定所有人都拥有相同尺寸的手指.如果你的设计足够紧,iPad 2和iPad mini的尺寸差异会产生差异,那么我和我妻子之间的手指大小会产生更大的差异.因此,补偿用户手指大小,而不是iPad型号.

我有一个关于如何测量手指大小的建议.我是一个原生的iOS开发人员,所以我不知道这是否可以在HTML5中完成,但这是我如何在本机应用程序中测量手指大小.我让用户将两个物体夹在一起,然后测量它们的接近程度.较小的手指会使物体靠得更近,您可以使用此测量值来推导比例因子.这会自动调整iPad尺寸.同样的人在iPad mini上的屏幕上的点数比iPad上的更大.对于游戏,你可以称之为校准步骤,甚至不称之为.把它作为一个开始步骤.例如,在射击游戏中,玩家将弹药放入枪中并进行捏动.

Answer 6

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

这里有一些示例代码可以帮助您入门.

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

当Apple不可避免地以不同的外形发布下一代iPad时,你几乎肯定需要重新审视这段代码.但我相信你会保持对每个新版iPad的维护.

Answer 7

不幸的是,它似乎像这样的时刻是不可能的: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

两天前,我发布了第一个检测到的问题:" 确认iPad Mini用户代理与iPad 2相同 ".我收到了数百个答案,说用户代理嗅探是一种不好的做法,我们应该检测功能而不是设备等等.

好吧,伙计们,你是对的,但它与问题没有直接关系.我需要添加第二个坏消息:没有客户端技术可以进行"特征检测".

Answer 8

这是一个疯狂的镜头,但iPad 2和iPad mini之间的区别之一是前者没有3轴陀螺仪.也许可以使用WebKit设备方向API来查看可以从中获取的信息类型.

例如,此页面似乎建议您只能rotationRate在设备具有陀螺仪时获取值.

对不起,我无法提供有效的POC - 我无法访问iPad mini.也许对这些方向API有更多了解的人可以在这里加入.

Answer 9

那么,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数量!希望有更好的东西出现.

Answer 10

编辑1: 我在下面的原始答案是"不要这样做".为了积极:

我认为,真正的问题与iPad X与iPad mini无关.我认为这是关于优化UI元素尺寸和位置到用户的人体工程学.您需要确定用户手指的大小,以便驱动UI元素大小调整,或者可能是定位.这又是,而且应该是在不需要实际知道您正在运行什么设备的情况下实现的.让我们夸大:你的应用程序是在40英寸对角线屏幕上运行的.不知道品牌和型号或DPI.你如何调整控件的大小？

您需要在网站/游戏中显示一个作为门控元素的按钮.我将由您决定在何处或如何做到这一点.

虽然用户将其视为单个按钮,但实际上它将由一个小的紧密排列按钮矩阵组成,这些按钮在视觉上被覆盖以显示为单个按钮图像.想象一个100 x 100像素的按钮,由400个按钮组成,每个按钮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: 注意你可能不需要那么多感觉按钮.一组同心圆或按钮排列得像一个巨大的星号*可能会很好.你必须做实验.

我的答案在下面,我给你两面硬币.

老答案:

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

如果您的按钮太小而无法在迷你上使用,则需要将按钮放大.

如果我在做本机iOS应用程序时学到了什么,那就是试图超越Apple是一种过度痛苦和恶化的公式.如果他们选择不允许您识别设备,那么,因为,在他们的沙箱中,您不应该.

我想知道,你是在调整肖像与风景的大小/位置吗？

Answer 11

是的,检查陀螺仪是个好点.你可以很容易地做到这一点

http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

或类似的东西

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

Answer 12

微基准怎么样,计算iPad 2上大约需要X微秒,iPad mini需要Y秒.

它可能不够准确,但可能会有一些指令,iPad mini的芯片效率更高.

Answer 13

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

您还可以使用Canvas API创建不可见的canvas元素,并将其转换为PNG/JPG.我没有任何方法来测试它,但由于底层压缩算法和设备的像素密度,结果位可能会有所不同.

Answer 14

你总是可以问用户？!

如果用户无法看到按钮或内容,请为他们提供一种自行管理缩放的方法.您始终可以在站点中构建一些缩放按钮,以使内容(文本/按钮)更大/更小.这将(几乎)保证适用于任何当前的iPad分辨率,并且可能是苹果决定要做出的任何未来分辨率.

Answer 15

这不是你提出的问题的答案,但我希望它比说"不要那样做"更有用:

而不是检测iPad Mini,为什么不检测用户是否很难敲击控件(或者:始终在控件的子区域中击中),并增大/缩小控件的大小以适应它们？

需要更大控件的用户无论硬件如何都能获得; 不需要更大控件并希望查看更多内容的用户也可以获得更多内容.这只是检测硬件并不简单,并且会有一些微妙的事情要做,但如果仔细检查它可能会非常好.

Answer 16

这让我想起电影"均衡"中的一句话:

"你能说,最简单的方法是让武器远离Grammaton Cleric吗？"

"你问他."

我们习惯于争取解决方案,有时候,问题可能会更好.(有很好的理由我们通常不会这样做,但它总是一个选项.)这里的所有建议都很棒,但一个简单的解决方案可能是让你的程序在启动时询问他们正在使用哪个iPad .

我知道这是一个厚颜无耻的答案,但我希望它提醒我们,我们不必为一切而战.(我已经为自己的支持做了准备.:P)

一些例子:

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

祝您好运 - 我希望您找到一个很棒的解决方案!但是,如果不这样做,请不要忘记这个.

Answer 17

没有回答这个问题,但问题背后的问题是:

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

如果您在iPad Mini上使用响应大小足以使用户友好的区域,同时保持UI控件的视觉表现足够小以在iPad上视觉上令人愉悦,该怎么办？

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

作为奖励,这也适用于iPad上的大牌.

Answer 18

这里的所有解决方案都不具备面向未来的能力(阻止Apple发布iPad的屏幕尺寸与iPad 2相同但分辨率与iPad Mini相同).所以我提出了一个想法:

创建一个宽度为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上的绝对值,所以你可以使用%的高度.

EDIT3:我做了一些研究,似乎无法在任何设备上实际获得屏幕大小.这不是操作系统可以知道的.当您在CSS中使用真实世界单元时,它实际上只是基于屏幕的某些属性的估计.不用说,这根本不准确.