苹果的iPad Mini在很多方面都是iPad 2的小复制品。在JavaScript中,是窗口。navigator对象为Mini和iPad 2暴露相同的值。到目前为止,我为检测差异而进行的测试还没有成功。
为什么这很重要?
由于iPad Mini和iPad 2的屏幕像素相同,但实际尺寸(英寸/厘米)不同,它们的PPI(每英寸像素)也不同。
为了提供友好的用户界面,web应用程序和游戏会根据用户的拇指或手指位置调整某些元素的大小,因此,我们可能想要缩放某些图像或按钮以提供更好的用户体验。
到目前为止我尝试过的事情(包括一些非常明显的方法):
window.devicepixelratio
CSS元素宽度,单位为cm
CSS媒体查询(如分辨率和-webkit-device-pixel-ratio)
SVG图形在类似的单位
在设定的时间内进行各种CSS webkit转换,并使用requestAnimFrame计算呈现的帧数(我希望检测到可测量的差异)
我没办法了。你呢?
更新
谢谢你的回复。我想对那些投票反对检测iPad mini和iPad 2的人发表评论,因为苹果有一个规则。好吧,这是我的理由,为什么我觉得知道一个人用的是iPad mini还是iPad 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. The iPad 2 is usually held with two hands when gaming unless you're Chuck Norris. 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).
为什么?事实证明,大多数用户倾向于使用默认设置,所以当玩家第一次加载游戏时,不要使用虚拟拇指杆,而是在屏幕上放置一些基于点击的控制,这是我和其他游戏设计师希望能够做到的。
所以恕我说,这超出了粗手指/指导方针的讨论,这是苹果和所有其他供应商应该做的事情:允许我们唯一地识别你的设备,以不同的方式思考,而不是遵循指导方针。
不要补偿iPad mini和iPad 2之间的差异,除非你也补偿了胖手指和瘦手指之间的差异。
Apple appears to be deliberately trying not to let you tell the difference. Apple appears not to want us to write different code for the different size versions of iPads. Not being part of Apple myself, I don't know this for sure, I'm just saying that this is what it appears like. Maybe, if the developer community comes up with a fancy detector for iPad minis, Apple may deliberately break that detector in future versions of iOS. Apple wants you to set your minimum target size to 44 iOS points, and iOS will display that in two sizes, the larger iPad size and the smaller iPhone/iPad mini size. 44 points is plenty generous, and your users will certainly know if they are on the smaller iPad, so can compensate on their own.
I suggest stepping back to your stated reason for asking for the detector: adjusting target size for end user comfort. By deciding to design for one size on the large iPad and another size on the small iPad you are deciding that all people have the same size fingers. If your design is tight enough that the difference in size from an iPad 2 and an iPad mini makes a difference, than the size of fingers between me and my wife will make a bigger difference. So compensate for user finger size, not iPad model.
I have a suggestion on how to measure finger size. I'm a native iOS developer, so I don't know if this can be accomplished in HTML5, but here's how I would measure finger size in a native app. I'd have the user pinch two objects together, then measure how close they get together. Smaller fingers will get the objects closer together, and you can use this measurement to derive a scaling factor. This automatically adjusts for iPad size. The same person will have a larger measurement of on screen points on an iPad mini than on an iPad 2. For a game you can call this a calibration step, or not even call it out. Have it as a starting step. For example in a shooting game have the player put the ammo in the gun with a pinching motion.
基于Douglas关于iPad 2上的新webkitAudioContext().destination. numberofchannels的问题,我决定运行一些测试。
检查numberOfChannels在iPad mini上返回2,但在iPad 2、iOS 5和iOS 6上没有返回2。
然后我试着检查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/
我通过创建一个iPad mini可以渲染的更大的画布来检测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);
我需要这个画布大小,所以它的特征检测在我的用例。