Question

我是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）如何知道该设备是便携式，移动设备还是平板设备？

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

Answer 1

通过查看用户代理字符串，IP地址，在某些情况下的时间，网络以及多年来在设备上收集了大量数据的众多数据库之一，可以很好地缩小范围直到使用什么设备，特别是如果它是最受欢迎的设备。 WURFL is one

Answer 2

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

您只能检测用户配置的三个特征：屏幕大小，屏幕类型（触摸/正常）和浏览器类型+版本。当涉及到设备类型检测时，后者与无用一样好，因此留下前两个。

使用这两种重复仪器，手机和平板电脑之间仍然只能做一个粗略的区分。手机越来越大，Android平板电脑制造商越来越多地为低端市场制造小型平板电脑。

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

在我看来，这是了解不同屏幕尺寸的最佳方式。如果只是因为编码一个可以适应屏幕尺寸但仍能产生专业外观网站的网站需要整体很多知识。为了区分触摸和普通设备，您不会需要影响。只需查看this SO page即可获得完全相同或更好的简短Javascript。

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

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

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值乘以设备像素比率。

影响不会自动调整设备，但正如您在Sai的答案中所看到的，您可以使用ig.ua来更改画布的大小。

另一种选择是将CSS应用于canvas元素，并为其提供响应大小（例如，以百分比指定）。你需要注意的是，当这样做时，CSS会缩放整个画布，因此最终可能会减少游戏的外观（因为你有效地将光栅图像拉伸到原始尺寸之外）。将此与较大的画布尺寸相结合可以减少质量损失。

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

4 个答案: