Impact如何知道设备是台式机，手机，平板电脑等（任何设备）？

Question

我是HTML 5和Impact的新手。 我将开始使用HTML 5，JavaScript进行编程。 我听说Impact是Javascript最好的2D引擎之一，因此我考虑购买并尝试一下。 但是在我这样做之前，我想确定Impact和Javascript会检测到我所在的设备并对此进行调整。

我希望该页面确定任何类型的设备，例如Nexus 7，iPhone，iPad，平板电脑或任何媒体设备。 屏幕尺寸呢，因为这是所有这些设备所不具备的。 iPhone的像素要多于您的一款较小的较便宜的Android设备。

Impact的成本约为99.99，因此我想确定它会执行此操作，以及是否需要HTML 5代码来检查移动设备，或者它是否会自动自动调整屏幕大小。

我的问题是Impact（Java或HTML 5）如何知道该设备是便携式，移动还是平板设备？

代码是否会自动调整？如果可以，它将如何调整图形和其他按钮，使它们仍然足够大以供使用？

Answer 1

通过查看用户代理字符串，IP地址，某些情况下的时间安排，网络以及多年来收集了设备上大量数据的众多数据库之一，可以很好地缩小范围。设备正在使用中，特别是如果它是最有可能的流行设备。 WURFL是其中之一 。

Answer 2

Impact是声称可以检测所有类型设备的产品之一。 就像WUFRL一样。 但我认为，他们的主张有50％或以上是错误的。

您只能检测到用户配置的三个特征：屏幕尺寸，屏幕类型（触摸/正常）和浏览器类型+版本。 在设备类型检测方面，后者和没有用一样好，因此只剩下前两个。

有了这两种剩余的仪器，手机和平板电脑之间仍然只能有一个粗略的区别。手机在不断扩大，Android平板电脑制造商越来越多地为低端市场生产小型平板电脑。

我建议您将您的网站设置为适合1024屏幕的标准配置，因为它可以在大多数平板电脑，台式机和笔记本电脑上很好地显示。 并为手机创建一个单独的网站/页面-假设您的客户愿意为此付费。 如果是他/她，则只需在两个站点上都放置一个按钮即可到达另一个站点。 因此，使用大型平板电脑的用户可以切换到台式机版本，而使用小型平板电脑的用户可以切换到台式机版本，反之亦然。

我认为，这是处理不同屏幕尺寸的最佳方法。 如果它仅仅是因为编码一个网站，将调整到屏幕大小，仍然产生一个专业寻找网站需要一大堆知识。 区分触摸设备和普通设备，不需要Impact。 只需在此SO页面上查看简短而简单的Java脚本即可，其效果完全相同，甚至更好。

Answer 3

您可以使用Impacts ig.ua.*属性来检查特定设备。 ig.ua可以尽快为主要使用impact.js文件被加载。

if( ig.ua.mobile ) {
    // Disable sound for all mobile devices
    ig.Sound.enabled = false;
}

if( ig.ua.iPhone4 ) {
    // The iPhone 4 has more pixels - we'll scale the 
    // game up by a factor of 4
    ig.main('#canvas', MyGame, 60, 160, 160, 4);
}
else if( ig.ua.mobile ) {
    // All other mobile devices
    ig.main('#canvas', MyGame, 60, 160, 160, 2);
}
else {
    // Desktop browsers
    ig.main('#canvas', MyGame, 60, 240, 160, 2);
}

您甚至可以通过使用媒体查询设置样式来更改布局。

@media screen and (min-width: 1200px) {
    #canvas{
        width:600px;
    }
}
@media screen and (max-width: 320px) {
        #canvas{
            width:160px;
        }
    }

媒体查询基于浏览器窗口大小而不是设备大小。

Answer 4

Impact确实可以检测到设备，尽管可能未达到所需的详细程度。 它使用一组标志填充ig.ua 查看版本1.24，它当前可以检测到iPhone，iPhone4（看起来实际上只是检测到iPhone上的视网膜屏幕，因此将包括所有较新的手机），iPad，Android和Windows Phone。 这些都是通过查询用户代理字符串完成的。 您可以修改此功能以检测更多的用户代理，但是按用户代理进行检测总是有些脆弱。

至于屏幕大小， ig.ua对象还包含2个对象，即viewport和screen 。 viewport使用window.innerWidth和window.innerHeight 。 screen使用window.screen.availWidth和window.screen.availHeight值乘以设备像素比率。

Impact不会自动针对设备进行调整，但是正如您在Sai的答案中所见，可以使用ig.ua更改画布的大小。

另一种选择是将CSS应用于canvas元素，并为其指定响应大小（例如，以百分比指定）。 您需要在执行此操作时注意CSS会缩放整个画布，因此最终可能会降低游戏的外观（因为您实际上是在将光栅图像拉伸到超出其原始大小）。 将其与较大的画布尺寸结合用于较大的设备可以减少质量损失。