How does Impact know whether a device is a desktop, a mobile phone, a tablet, etc (Any Device)?

Question

I am new to HTML 5 and Impact. I am going to start programming in HTML 5, Javascript. I have heard that Impact is one of the best 2D engines for Javascript so I thought about purchasing it and giving it a try. But before I do I want to make certain that Impact and Javascript will detect the device that I am on and adjust for that.

I would like the page to determine any type of device, such as Nexus 7, iPhone, iPad, tablets, or any media device. What about screen size because that is something that all of these devices have that are not common. iPhones have more pixels than one of your smaller cheaper Android devices.

The cost of Impact is around 99.99 so I want to make certain that it will do this and if it requires HTML 5 code to check for mobile devices or if it will just automatically adjust the screen size automatically.

My question is how does Impact (Javascript or HTML 5) know if the device is a portable, mobile or tablet device?

Does the code just adjust automatically and if it does how does it adjust the graphics and other buttons so that they still are large enough to be used?

Answer 1

By looking at the user agent string, the IP address, timing in some cases, the network and one of many databases that have collected a lot of data on devices over the years, it's possible to do a very good job of narrowing down to what device is being used, particularly if it's a popular device which is most likely. WURFL is one.

Answer 2

Impact is one of those products that claim they can detect all types of devices there are. Just as that WUFRL is. But their claims are false for 50% or more, I should think.

You can detect only three characteristics of the user's configuration: screen size, screen type (touch/normal), and browser type + version. The latter is as good as useless when it comes to device type detection, so that leaves the first two.

And with those two remaning instruments, still only a rough distinction can be made between mobile phones and tablets.The phones keep getting bigger, and Android tablet makers increasingly make small tablets for the lower end of the market.

I would advise you to make your site suited for a 1024 screen as a matter of standard, because that will display well on most tablets and desk- and laptops. And to create a separate site/page for mobile phones -- assuming your client is willing to pay for that. If s/he is, just put buttons on both sites that lead to the other site. So that a user with a large tablet can switch to the desktop version, and s/he with a small one or a phone vice versa.

In my opinion, that is the best way to go about different screen sizes. If it were only because coding a site that will adjust to screen size and still produce a professionally looking site takes a whole lot of knowledge. To differentiate between touch and normal devices, you won't need Impact. Just have a look at this SO page for a short and simple Javascript that does exactly the same, or better.

Answer 3

You can use Impacts ig.ua.* properties to check for particular devices. ig.ua can be used as soon as the main impact.js file is loaded.

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

You can even change the layout by styling them using media-queries.

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

media-queries are based on browser window size not on device size.

Answer 4

Impact does detect the device, although possibly not at the level of detail you want. It populates ig.ua with a set of flags. Looking at version 1.24, it currently detects iPhone, iPhone4 (which looks like it actually just detects retina screens on an iPhone, so will include all the newer phones), iPad, Android, and Windows Phone. These are all done by querying the user agent string. You could modify this function to detect more user agents, but detecting by user agent is always going to be a bit fragile.

As for screen size, the ig.ua object also contains 2 objects, viewport and screen. viewport uses window.innerWidth and window.innerHeight. screen uses the window.screen.availWidth and window.screen.availHeight values, multiplied by the device pixel ratio.

Impact does not automatically adjust for the device, but as you can see in Sai's answer, you can use ig.ua to change the size of the canvas.

Another option is to apply CSS to the canvas element, and give it a responsive size (specifying in percentages, for example). You need to be aware when doing this that the CSS will scale the entire canvas, so it may end up reducing the look of a game (since you're effectively stretching a raster image beyond its original size). Combining this with a larger canvas size for larger devices could reduce the loss of quality.