在HTML5中检测iPad Mini

时间：2012-11-06 09:53:08

标签： javascript html5 ipad svg

Apple的iPad Mini是iPad 2的一个较小的克隆，其方式比我们想要的更多。在JavaScript中，window.navigator对象为Mini和iPad 2公开了相同的值。到目前为止，检测差异的测试并没有带来成功。

为什么这很重要？

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

对于提供友好用户界面的Web应用程序和游戏，某些元素的大小会根据用户的拇指或手指位置进行调整，因此，我们可能需要缩放某些图像或按钮以提供更好的用户体验。 / p>

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

  • 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英寸），但它的外形允许不同的用途。除非你Chuck Norris，否则iPad 2通常在游戏时用双手握住。迷你体积更小，但它也更轻巧，允许您用一只手拿着它并使用另一只手轻扫或点击或诸如此类的游戏。作为一名游戏设计师和开发人员，我只想知道如果它是迷你版，那么我可以根据需要选择为玩家提供不同的控制方案（例如在A / B测试之后）一群球员）。

为什么呢？嗯，事实证明，大多数用户都倾向于使用默认设置，因此当播放器加载时，请忽略虚拟拇指杆并在屏幕上放置一些其他基于抽头的控件（这里只是给出任意示例）这是我第一次和其他游戏设计师喜欢能够做的事情。

所以恕我直言，这超出了粗略的手指/指南讨论，只是苹果和所有其他供应商应该做的事情：允许我们唯一地识别您的设备和认为不同而不是跟随指南。

23 个答案:

答案 0 :(得分：253)

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

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

答案 1 :(得分：132)

更新： It looks like这些值会在制表标签时报告视口宽度和高度，并且在旋转时不会更改，因此此方法可以'用于设备检测！

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

iPad Mini 

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/

答案 2 :(得分：84)

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

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

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

答案 3 :(得分：74)

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

让我举个例子：iPad mini版本6.0将“10A406”显示为内部版本号，而iPad 2则显示“10A5376e”。

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

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

答案 4 :(得分：69)

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

苹果似乎故意不让你说出不同之处。 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 2上的测量值更大。对于游戏，你可以称之为校准步骤，甚至不称之为。把它作为一个开始步骤。例如，在射击游戏中，玩家将弹药放入枪中并进行捏动。

答案 5 :(得分：31)

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

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

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

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

答案 6 :(得分：28)

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

  

两天前，我发布了关于第一个检测到的问题的推文：“确实如此   确认iPad Mini User Agent与iPad 2相同“。   我收到了数百个答案，说用户代理   嗅探是一种不好的做法，我们应该检测不到的功能   设备等等。

     好吧，伙计们，你是对的，但它没有直接关系   问题。我需要添加第二个坏消息：没有   客户端技术使“特征检测”既不。

答案 7 :(得分：26)

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

例如，this page似乎表明如果设备有陀螺仪，您只能获得rotationRate值。

抱歉，我无法提供有效的POC - 我无法访问iPad mini。也许那些对这些方向API有更多了解的人可以在这里讨论。

答案 8 :(得分：20)

嗯，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的数量感到抱歉！希望有更好的东西出现。

答案 9 :(得分：18)

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

结果数组：

button array

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

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

我认为这个sense_array按钮可以作为进入应用程序的一部分进行隐藏。例如，如果它是一个游戏，可能有一个“播放”按钮或各种按钮，用户的名字或选择他们将播放的等级，等等。你明白了。 sense_array按钮可以存在于用户必须触摸的任何地方，以便进入游戏。

编辑2：只是注意到你可能不需要那么多感觉按钮。一组同心圆或按钮排列得像一个巨大的星号*可能会很好。你必须试验。

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

OLD ANSWER：

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

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

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

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

答案 10 :(得分：11)

是的，检查陀螺仪是个好点。 您可以使用

轻松完成

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

答案 11 :(得分：11)

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

这可能不够准确，但可能会有一些说明iPad mini的芯片效率更高。

答案 12 :(得分：8)

要求拥有iPad2用户代理的所有用户提供照片using the built in camera并使用HTML File API检测分辨率。由于相机的改进，iPad Mini照片的分辨率会更高。

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

答案 13 :(得分：7)

您可以随时询问用户吗？！

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

答案 14 :(得分：6)

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

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

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

答案 15 :(得分：6)

这让我想起电影“均衡”中的一句话：

  

“你能说，最简单的方法是让武器远离Grammaton Cleric？”

     

“你问他。”

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

我知道这是一个厚颜无耻的答案，但我希望这提醒我们，我们不必为一切而战。 （我已经为自己的支持做了准备。：P）

一些例子：

  • 操作系统安装期间的键盘检测有时无法检测到 特定键盘，因此安装人员必须要求。
  • Windows询问是否 您连接的网络是家庭网络或公共网络。
  • 计算机无法检测到即将使用它的人，因此需要用户名和密码。
祝你好运 - 我希望你找到一个很棒的解决方案！但是，如果你不这样做，请不要忘记这个。

答案 16 :(得分：5)

没有回答这个问题，但问题背后的问题是：

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

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

如果您收集了不在视觉区域内的足够的水龙头，您可以决定直观地缩放UI控件。

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

答案 17 :(得分：5)

这里的所有解决方案都不具备面向未来的能力（因为什么阻止Apple发布与iPad 2具有相同屏幕尺寸的iPad，但其分辨率与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上使用position：absolute，这样就可以使用％的高度。

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

答案 18 :(得分：2)

未经测试，但不是播放音频文件并检查天平，它可以用来收听麦克风，提取背景噪音，并计算其“颜色”（频率图）。如果IPad Mini具有与IPad 2不同的麦克风模型，那么它们的背景颜色应该是明显不同的，并且一些音频指纹技术可以帮助您判断哪个设备正在使用中。

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

答案 19 :(得分：2)

基于{2}关于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);​

同样，带有iOS 6的iPad Mini和iPad 2返回true，而带有iOS 5的iPad 2返回false。

（此测试不适用于桌面，桌面检查webkitAudioContext是否为函数）。

以下是您试用的代码：Douglas

答案 20 :(得分：2)

如果您创建了一堆1“x1”宽的div并将它们逐个附加到父div，直到边界框从1英寸跳到2英寸，该怎么办？迷你上的一英寸与iPad上的一英寸相同，对吗？

答案 21 :(得分：2)

在iOS7中有一个系统范围的设置，用户可以调整：当事情变得太小而无法阅读时，可以更改文字大小设置。

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

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

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

答案 22 :(得分：1)

我通过创建一个画布that is larger an iPad mini can render来检测iPad mini，填充一个像素然后再读出颜色。 iPad mini将颜色读为＆00; 000000＆＃39;。其他一切都将它渲染为填充颜色。

部分代码：

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);

我需要这个用于画布大小调整，以便在我的用例中进行特征检测。

相关问题
最新问题