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

【问题标题】：How does Impact know whether a device is a desktop, a mobile phone, a tablet, etc (Any Device)?Impact 如何知道设备是台式机、手机、平板电脑等（任何设备）？
【发布时间】：2014-08-31 02:22:36
【问题描述】：

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

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

【问题讨论】：

它可能会查看用户代理字符串。
什么是“网站”设备？
@Bergi 我猜他的意思是计算机上的浏览器
@Bergi：为您的评论 +1，但我认为您也应该编辑标题。设备是互联网站点？
construct2 更好吗？

标签： javascript responsive-design touch detection impactjs

【解决方案1】：

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

【讨论】：

使用 IP 地址进行类型检测？在我的家/商业中，我使用 Android 智能手机、Android 平板电脑、iPad、Win Vista 笔记本电脑和两台 Win XP 笔记本电脑进行冲浪。都具有相同的外部 IP。
@FrankConijn 有时飞扬的手指会想出我通常不会想到的东西。我应该包括屏幕尺寸和其他一些东西。

【解决方案2】：

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

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

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

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

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

【讨论】：

您忘记了操作系统，它通常与 UA 字符串一起发送。这说明了很多关于设备类型的信息。
据我所知，操作系统特性不会发送到服务器。它可以被检测到，但只能使用客户端 Javascript -- navigator.platform。
打开您的开发工具并检查在您发出请求时为User-Agent 标头发送的内容。
我去了这个 SO 页面，但它只是一个简单的脚本，我将它粘贴到一个测试 .html 文件中，但什么也没有出现。
@Bergi: 是的（我并没有真正这样看待 uAs），但是对于双模式 Windows 8 设备，这变得不可靠。此外，即将推出的 Google 桌面设备的可靠性如何？他们会像他们的手机操作系统一样发送“Android”吗？另外，请查看“兼容性视图列表”下的this page。

【解决方案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;
        }
    }

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

【讨论】：

是的，但您正在使用媒体查询确定用户的布局。我认为应该给用户选择权。现在有非常小的平板电脑，仍然有 1024 甚至 1280 的屏幕。
感谢您的回复。你能建立一个我可以测试的工作 Html 页面，看看它是否可以检测到我正在使用的设备。比如 Nexus 7、iPhone 和我的桌面浏览器。谢谢。
@FrankConijn 是真的..谢谢你。我会记住这一点

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

【讨论】：