在 HTML5 中检测 iPad Mini

2022-08-29 23:37:15

苹果的iPad Mini是iPad 2的一个更小的克隆,在很多方面都比我们想要的要多。在 JavaScript 中,该对象为 Mini 和 iPad 2 公开了相同的值。到目前为止,我检测差异的测试并没有导致成功。window.navigator

为什么这很重要?

由于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在玩游戏时通常用两只手握住,除非你是Chuck Norris。mini更小,但它也更轻,并允许你用一只手握住它,用另一只手滑动或点击或其他方式进行游戏。作为一名游戏设计师和开发人员,我只想知道它是否是迷你游戏,这样我就可以根据需要选择为玩家提供不同的控制方案(例如,在与一组玩家进行A / B测试之后)。

为什么?好吧,事实证明,大多数用户倾向于使用默认设置,因此,当玩家第一次加载游戏时,省略虚拟操纵杆并在屏幕上放置其他一些基于点击的控制(只是在这里给出一个任意示例)是我,可能还有其他游戏设计师, 希望能够做到。

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


答案 1

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

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


答案 2

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

您可以使用其中任何一个,或者因为它们对于iPad Mini和iPad 2来说似乎有所不同。screen.availWidthscreen.availHeight

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/