0

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

我希望该页面能够确定任何类型的设备，例如 Nexus 7、iPhone、iPad、平板电脑或任何媒体设备。屏幕尺寸怎么样，因为这是所有这些设备都不常见的东西。iPhone 的像素比您的一款更小、更便宜的 Android 设备要多。

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

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

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

4

4 回答 4

2

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

于 2014-07-09T23:54:10.853 回答
1

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

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

于 2014-07-10T07:24:26.917 回答
1

Impact 是声称可以检测所有类型设备的产品之一。就像 WUFRL 一样。但我认为，他们的说法有 50% 或更多是错误的。

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

而有了这两个remaning仪器，仍然只能粗略地区分手机和平板电脑。手机越来越大，Android平板电脑制造商越来越多地为低端市场生产小型平板电脑。

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

在我看来，这是处理不同屏幕尺寸的最佳方式。如果仅仅是因为编写一个能够适应屏幕尺寸并仍然产生具有专业外观的网站的网站需要大量的知识。要区分触控设备和普通设备，您不需要 Impact。只需查看此 SO 页面，即可获得完全相同或更好的简短 Javascript。

于 2014-07-10T00:48:18.023 回答
0

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 将缩放整个画布，因此最终可能会降低游戏的外观（因为您有效地将光栅图像拉伸到其原始大小之外）。将此与较大设备的较大画布尺寸相结合可以减少质量损失。

于 2014-08-26T09:55:49.243 回答