If your app is mainly text based, you can just let the type flow wherever it wants. But games almost always need specific items in specific places. So it is important to know exactly what size your game board is!
I wondered about this, and so I wrote a small app and found some answers.
I used the innerWidth, outerWidth, innerHeight, and outerHeight properties of the HTML DOM window object. This is supported in Mozilla, so we know we are good to go: https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth.
Here's what these properties do:
innerWidth = width of the viewport (not including scrollbars and chrome)
outerWidth = width of the whole window (includes scrollbars and chrome)
innerHeight = height of the viewport (not including scrollbars and chrome)
outerHeight = height of the whole window (includes scrollbars and chrome)
Chrome is not a browser name; here it means the stuff that surrounds the actual content of your page. Usually there is more chrome at the top and bottom (menus, notifications, etc.). You care about the inner parts because that's where your game takes place.
So I wrote a web page that looks around from the inside and tells us what it sees.
<!DOCTYPE = html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
height=device-height, user-scalable=false;">
<title>Hello Firefox</title>
<script>
w = window.outerWidth;
w2 = window.innerWidth;
w3 = w + " " + w2;
h = window.outerHeight;
h2 = window.innerHeight;
h3 = h + " " + h2;
howBig = w3 + " " + h3;
alert(howBig);
</script>
</head>
<body>
<h1>Hello</h1>
<p>This is a hello page.</p>
</body>
</html>
Most of this is straight HTML5 stuff. Firefox OS likes UTF-8 so I put it in.
Next I added the viewport information. That just tells the page to make the page the same size as the device width and height, and won't let the user modify the page size. We want our window to fit snugly into the screen of the ZTE Open.
Next, I wrote some simple code that gets the inner and outer widths and heights so I could see what happens.
So then here comes the cool part. I ran this code in the Firefox OS Simulator and here's what I got:
Next I pushed it to the ZTE Open and took a screen shot:
As you will notice, the inner height and width on the ZTE Open is the same as the simulator: 320x460. However, the chrome is a bit more. The width is an additional 26 pixels but the height is a less because there isn't the Firefox browser chrome that the simulator uses (that's the part that says "Firefox OS Simulator" in the first screenshot and has the three buttons at the top right).
The point of all this is that the simulator still tells you the inner dimensions of the screen on the phone (320x460) which is what the specs say. But this is the inner screen dimensions and corresponds to the viewport size. So when designing your app for Firefox OS, make sure you check what screen real estate you have. Especially as new phones and tablets come out, find out what room you actually have.
Why? Well, if you know how big something is, you can juggle things around to make them fit. When Android and iPhone came out, their screen sizes were "standard" but they quickly changed as various new phones came out with different sizes. Checking this out will make your life easier!
My two favorite sayings for programming are:
Trust No One
and
The Truth is Out There
Both from the X-Files, but they apply to programming. You must test everything yourself and never assume that something written is true. But, on the other hand, if you search long enough, you'll get the right answer.
Maybe one of the best reasons to play around with this is that you can write the same app for the Firefox OS phone and have your app run in a Firefox browser. And maybe if we're very good little children, we'll get to play with a Firefox OS tablet.
No comments:
Post a Comment