在HTML5中检测iPad Mini

本文翻译自：Detect iPad Mini in HTML5

Apple's iPad Mini is a smaller clone of the iPad 2 in more ways than we'd want. Apple的iPad Mini是iPad 2的小型克隆，其方式比我们想要的更多。 In JavaScript, the window.navigator object exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have not lead to success. 在JavaScript中， window.navigator对象为Mini和iPad 2公开了相同的值。到目前为止我的测试检测差异并没有带来成功。

Why is this important? 为什么这很重要？

As the iPad Mini and iPad 2 screens are identical in pixels but vary in actual size (inches / centimeters), they vary in PPI (pixels per inch). 由于iPad Mini和iPad 2屏幕的像素相同但实际尺寸（英寸/厘米）不同，因此它们的PPI （每英寸像素数）不同。

For web applications and games to offer a friendly user interface, certain elements are adjusted in size relative to a user's thumb or finger position, thus, we may want to scale certain images or buttons to provide for that better user experience. 对于提供友好用户界面的web应用和游戏，某些元素相对于用户的拇指或手指位置进行大小调整，因此，我们可能想要缩放某些图像或按钮以提供更好的用户体验。

Things I have tried so far (including some pretty obvious approaches): 到目前为止我尝试过的事情（包括一些非常明显的方法）：

window.devicepixelratio
CSS element width in cm unit CSS元素宽度，单位为cm
CSS media queries (such as resolution and -webkit-device-pixel-ratio ) CSS媒体查询（例如resolution和-webkit-device-pixel-ratio ）
SVG drawings in similar units 类似单位的SVG图纸
Doing all sorts of CSS webkit transforms for a set time and counting rendered frames with requestAnimFrame (I was hoping to detect a measurable difference) 在设定的时间内进行各种CSS webkit变换，并使用requestAnimFrame渲染帧进行计数（我希望能够检测出可测量的差异）

I'm fresh out of ideas. 我是新鲜的想法。 How about you? 你呢？

Update Thanks for the responses so far. 更新感谢目前为止的回复。 I would like to comment on people voting against detecting iPad mini versus 2 as Apple has uhm, one guideline to rule them all. 我想评论人们投票反对检测iPad mini而不是2，因为苹果公司已经呃，这是一个统治它们的指导方针。 Okay, here's my reasoning why I feel it really makes all sense in the world to know if a person is using an iPad mini or a 2. And do with my reasoning what you like. 好的，这就是我的理由，为什么我觉得在这个世界上真的有意义的是知道一个人是在使用iPad mini还是2.并且我的理由是你喜欢的。

The iPad mini is not only a much smaller device (9.7 inch versus 7.9 inch), but its form factor allows for a different usage. iPad mini不仅是一个小得多的设备（9.7英寸对7.9英寸），但它的外形允许不同的用途。 The iPad 2 is usually held with two hands when gaming unless you're Chuck Norris . 除非你是查克诺里斯，否则iPad 2通常在游戏时用双手握住。 The mini is smaller, but it is also much lighter and allows for gameplay where you hold it in one hand and use another to swipe or tap or whatnot. 迷你体积更小，但它也更轻巧，允许您用一只手拿着它并使用另一只手轻扫或点击或诸如此类的游戏。 As a game designer and developer myself, I'd just like to know if it's a mini so I can choose to provide the player with a different controlscheme if I want (for instance after A/B testing with a group of players). 作为一名游戏设计师和开发者，我只想知道它是否是迷你游戏，所以如果我愿意，我可以选择为玩家提供不同的控制方案（例如在与一组玩家进行A / B测试之后）。

Why? 为什么？ Well, it's a proven fact that the majority of users tend to go with the default settings, so leaving out a virtual thumbstick and putting some other tap-based control on the screen (just giving an arbitrary example here) when the player loads up the game for the first time is what I, and probably other game designers, would love to be able to do. 嗯，事实证明，大多数用户都倾向于使用默认设置，因此当播放器加载时，请忽略虚拟拇指杆并在屏幕上放置一些其他基于抽头的控件（这里只是给出任意示例）比赛的第一次是我，恐怕其他游戏设计师，很想能够做到。

So IMHO this goes beyond the thick fingers / guidelines discussions and is just something Apple and all other vendors ought to do: allow us to uniquely identify your device and think different instead of following guidelines. 因此，恕我直言，这超出了粗略的手指/指南讨论，只是Apple和所有其他供应商应该做的事情：允许我们唯一地识别您的设备并思考不同而不是遵循指南。

#1楼

参考：https://stackoom.com/question/taXN/在HTML-中检测iPad-Mini

#2楼

Unfortunately, at the moment it seems like this isn't possible: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent 不幸的是，目前看来这是不可能的： http ： //www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Two days ago, I've tweeted about the first detected problem: “ It is confirmed that the iPad Mini User Agent is the same as the iPad 2 “. 两天前，我发布了第一个检测到的问题：“ 确认iPad Mini用户代理与iPad 2相同 ”。 I've received literally hundreds of answers saying that user agent sniffing is a bad practice, that we should detect features not devices, etc, etc. 我收到了数百个答案，说用户代理嗅探是一种不好的做法，我们应该检测功能而不是设备等等。

Well yes guys, you are right, but it has no direct relationship with the problem. 好吧，伙计们，你是对的，但它与问题没有直接关系。 And I need to add the second bad news: there is no client-side technique to make ”feature detection” neither . 我需要添加第二个坏消息： 没有客户端技术可以进行“特征检测” 。

#3楼

I know that is a horrible solution, but at the moment the only way to differentiate between an iPad Mini and an iPad 2 is to check its build number and map each build number with the related device. 我知道这是一个可怕的解决方案，但目前区分iPad Mini和iPad 2的唯一方法是检查其内部版本号并使用相关设备映射每个内部版本号。

Let me give you an example: iPad mini, version 6.0, is exposing " 10A406 " as build number, while iPad 2 is exposing " 10A5376e ". 让我举个例子：iPad mini 6.0版曝光“ 10A406 ”作为内部版本号，而iPad 2曝光“ 10A5376e ”。

This value can be easily obtained through a regex on the user agent ( window.navigator.userAgent ); 通过用户代理上的正则表达式可以很容易地获得该值（ window.navigator.userAgent ）; that number is prefixed with " Mobile/ ". 该号码以“ Mobile/ ”为前缀。

Unfortunately this is the only unequivocal way to detect an iPad Mini; 不幸的是，这是检测iPad Mini的唯一明确方式; I would suggest to adopt a viewport related approach (where supported, using vh / vw units) to properly display contents on different screen sizes. 我建议采用viewport相关的方法（支持使用vh / vw单元）来正确显示不同屏幕尺寸的内容。

#4楼

I understand this might be a bit low-tech solution, but since we can't seem to come up with anything else yet.. 我知道这可能是一个有点低技术的解决方案，但因为我们似乎无法提出任何其他的东西..

I am assuming you already check for most of the other devices, so I see the following scenarios possible. 我假设你已经检查了大多数其他设备，所以我看到以下场景可能。

You could check for ALL the possible most popular devices that require special CSS/sizing, and if it matches none of those either assume it's an iPad mini or simply ask the user? 您可以检查所有可能最受欢迎的设备，这些设备需要特殊的CSS /大小调整，如果它们都不匹配，则假设它是iPad mini或只是询问用户？

// Device checks here
...
else {// it would probably be better to make this a nicer popup-thingvar mini = prompt("Are you using a iPad mini? Press yes for a better user experience");// Store the result for future visits somehow.
}

I know that might seem like a stupid approach right now, but if we currently have no way of deciding if the device is a iPad mini or an iPad 2 at least the website will be usable with iPad mini devices doing something like this. 我知道现在看起来似乎是一种愚蠢的方法，但如果我们目前无法决定该设备是iPad mini还是iPad 2，那么至少该网站可以与iPad mini设备一起使用。

You could even go with something like this: 你甚至可以用这样的东西：

"To give you the best possible browsing experience we try to detect your device-type to customise the website to your device. Unfortunately due to limitations this is not always possible and we can't currently determine if you use an iPad 2 or an iPad mini by using these methods. “为了给您提供最佳的浏览体验，我们会尝试检测您的设备类型，以便根据您的设备自定义网站。不幸的是，由于受到限制，我们无法始终确定您是否使用iPad 2或iPad使用这些方法迷你。

For the best possible browsing experience, please select what device you are using below. 为获得最佳浏览体验，请在下方选择您使用的设备。

This choice will be stored for future visits to the website on this device. 此选项将存储以供将来访问此设备上的网站。

[] iPad 2
[*] iPad mini
[] Ancient blackberry device

" “

I am not entirely familiar with what you can and can't do client-side in Javascript. 我不完全熟悉你能做什么，不能在Javascript中做客户端。 I know you can get a user's IP, but is it possible to get a user's mac address? 我知道你可以获得用户的IP，但是有可能获得用户的mac地址吗？ Are those ranges different between iPad2's and iPad mini's? 这些范围在iPad2和iPad mini之间有区别吗？

#5楼

This is a wild shot, but one of the difference between iPad 2 and iPad mini is that the former does not have a 3-axis gyroscope. 这是一个疯狂的镜头，但iPad 2和iPad mini之间的区别之一是前者没有3轴陀螺仪。 Maybe it'll be possible to use the WebKit device orientation API to see what sort of information you can get from it. 也许可以使用WebKit设备方向API来查看可以从中获取的信息类型。

For example, this page seems to suggest that you can only get the rotationRate value if the device has a gyroscope. 例如，此页面似乎表明，如果设备具有陀螺仪，则只能获取rotationRate值。

Sorry I can't give a working POC - I don't have access to an iPad mini. 对不起，我无法提供有效的POC - 我无法访问iPad mini。 Maybe someone who knows a bit more about these orientation APIs can chime in here. 也许对这些方向API有更多了解的人可以在这里加入。

#6楼

Yes, it's a good point to check gyroscope. 是的，检查陀螺仪是个好点。 You can easily do it with 你可以很容易地做到这一点

https://developer.apple.com/documentation/webkitjs/devicemotionevent https://developer.apple.com/documentation/webkitjs/devicemotionevent

or something like 或类似的东西

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

Don't have any iPads to test it out. 没有任何iPad可以测试它。

在HTML5中检测iPad Mini相关推荐

html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
苹果iPad mini 2真机泄露仍存疑点
随着苹果发布会的临近,在网络上有关iPad mini 2的各种消息也被炒得热火朝天.日前,来自德国的网站2014-News独家曝光了一张苹果iPad mini 2的真机谍照,并显示该机也可能会具备指纹 ...
ipad mini4 linux,有人在 El Capitan 的文件中找到了 iPad mini 4 的踪迹
Apple 现有的平板产品线中,能支持 iOS 9 分屏功能的,就只有硬件达标的 iPad Air 2 而已.不过,按照 9to5mac 和开发者 Hamza Sood 最新的发现来看,能「一心两用」 ...
unity 适配ipad_Unity为iPad 4和新款iPad Mini做好了准备！
unity 适配ipad iOS developers around the world are waiting impatiently for Friday, November 2, when th ...
Win8.1 “运行”在Ipad Mini上
首先需要在本地建立Win8.1的虚拟机,开启远程桌面,关闭防火墙,具体在hypre-V中如何建立Win8虚拟机这里就不在多说了,网上有很多资料,注意硬盘配置为VHD格式,因为Azure只识别这个,如果 ...
HTML5中Web Worker技术的使用实例
web worker是html5中新特性中非常吸引人的技术亮点之一,我们可以把它理解为javascript中的多线程技术,我们知道javascript语言的执行环境是单线程的,浏览器执行某段程序的时候 ...
html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
html5中api有什么,HTML5中的API概览
HTML5中的API概览整理一下HTML5中的常见API. 前言 HTML5中提供了一些功能强大的API,在不考虑兼容性的情况下,比起原生js实现更加简单,比起jQuery可以少引入包,这里整理几个 ...
ie8 html 语音标签,让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本在里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. ②又要无休止的找ie8的解决方法,自 ...

在HTML5中检测iPad Mini

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

在HTML5中检测iPad Mini相关推荐

最新文章

热门文章