首页 文章

在HTML5中检测iPad Mini

提问于
浏览 次
375

Apple 's iPad Mini is a smaller clone of the iPad 2 in more ways than we' d想要 . 在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 计算渲染帧（我希望检测到可测量的差异）

我是新鲜的想法 . 你呢？

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

iPad mini不仅是一个小得多的设备（9.7英寸对7.9英寸），但它的外形允许不同的用途 . iPad 2通常在游戏时用双手握住，除非你是Chuck Norris . 迷你体积更小，但它也更轻，允许用一只手握住它并使用另一只手轻扫或点击或诸如此类的游戏 . 作为一名自己的游戏设计师和开发人员，我只想 know 如果它是迷你的话我可以选择为玩家提供不同的控制方案，如果我想要的话（例如在与一组玩家进行A / B测试之后） .

为什么？嗯，事实证明，大多数用户都倾向于采用默认设置，因此当玩家加载时，不要在屏幕上留下虚拟的拇指操纵杆并在屏幕上放置一些其他基于抽头的控件（这里只是给出一个任意的例子）第一次游戏是我，也许是其他游戏设计师，会喜欢 be able to .

因此，恕我直言，这超出了厚厚的手指/指导方针讨论，只是Apple和所有其他供应商应该做的事情：允许我们唯一地识别您的设备和 think different 而不是 following 指南 .

javascript html5 ipad svg

23 回答

  • 2

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

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

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

    回复于
  • 1

    EDIT 1: 我的原始答案如下，是"don't do it" . 为了积极的利益：

    我认为，真正的问题与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按钮可以在用户必须触摸的任何地方生活，以便进入游戏 .

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

    我的答案如下，我给你两面硬币 .

    OLD ANSWER:

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

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

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

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

    回复于
  • 132

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

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

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

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

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

    回复于
  • 26

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

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

    回复于
  • 20

    你总是可以问用户？！

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

    回复于
  • 84

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

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

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

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

    一些例子：

    • 操作系统安装期间的键盘检测有时无法检测到特定的键盘，因此安装人员必须询问 .

    • Windows询问您连接的网络是家庭网络还是公共网络 .

    • 计算机无法检测到即将使用它的人，因此他们需要用户名和密码 .

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

    回复于
  • 2

    嗯，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 . 无论哪个更接近整数，都将表明正在使用哪个设备 .

    抱歉，这个答案中的ifs数量！希望有更好的东西出现 .

    回复于
  • 6

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

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

    回复于
  • 2

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

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

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

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

    回复于
  • 7

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

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

    回复于
  • 253

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

    让我举个例子：iPad mini 6.0版正在曝光“ 10A406 " as build number, while iPad 2 is exposing " 10A5376e ” .

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

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

    回复于
  • 8

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

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

    回复于
  • 11

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

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

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

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

    回复于
  • 69

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

    回复于
  • 2

    Update: It looks like这些值在标签创建时报告视口宽度和高度，并且在旋转时不会更改，因此 this method can't be used for device detection ！

    您可以使用 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/

    回复于
  • 74

    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 2上的测量值更大 . 对于游戏，你可以称之为校准步骤，甚至不是叫出来 . 把它作为一个开始步骤 . 例如，在射击游戏中，玩家通过捏动动作将弹药放入枪中 .

    回复于
  • 28

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

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

    回复于
  • 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可以测试它 .

    回复于
  • 18

    基于Douglas关于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/

    回复于
  • 31

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

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

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

    回复于
  • 5

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

    例如，this page似乎暗示如果设备具有陀螺仪，则只能获得 rotationRate 值 .

    对不起，我无法提供工作POC - 我无法访问iPad mini . 也许对这些方向API有更多了解的人可以在这里讨论 .

    回复于
  • 5

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

    在这个特定的情况下，我并不认为它可行并且值得麻烦，但我认为 fingerprinting the background noise 可以在某些应用程序中使用，例如，当你在建筑物内时告诉你你在哪里 .

    回复于
  • 6

    这里的所有解决方案都不具备面向未来的能力（这会阻止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现在以英寸为单位保持 available to the application 的大小（但要注意舍入错误） . 您可以使用它以您喜欢的方式放置GUI . 此外，不要忘记删除无用的div .

    另请注意，如果用户以全屏模式运行应用程序，Kaspars提出的算法不仅不起作用，而且如果Apple修补浏览器UI，它也会中断 .

    这不会区分设备，但正如您在编辑中所解释的那样，您实际想知道的是设备屏幕大小 . 我的想法也不会告诉你确切的屏幕大小，但它会给你一个更有用的信息，你可用于绘制GUI的实际大小（以英寸为单位） .

    EDIT: 使用此代码检查它是否真的可以在您的设备上运行 . 我没有任何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中使用真实世界单元时，它实际上只是基于屏幕的某些属性的估计 . 不用说，这根本不准确 .

    回复于

相关问题