Long Lost Cousin to Responsive Design (Game Programming)

In my recent post on Responsive Design, at http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html, I noted the interesting problems with the Software Home button and how that robbed precious screen real estate from the ZTE Open. The same issues apply to other phones, but the ZTE is especially important because the screen is small.

Software Home Button

To refresh your memory, here is the ZTE Open with no Software Home button.

And here is the same ZTE Open with the Software Home button:

50 pixels lost!

André Jaenisch did some digging and discovered that this is documented on MDN.  Thank you, André!

MDN programming at https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia/Gaia_apps/System#The_software_home_button says to use this CSS to detect and display the Software Home button:

@media not all and (-moz-physical-home-button) {
  #screen:not(.software-button-disabled) > #windows > .appWindow {
    bottom: 5rem;
  }
 }

And mentions the ability to set this in the Developer Settings here at https://developer.mozilla.org/en-US/Firefox_OS/Debugging/Developer_settings#Enable_software_home_button.

I never noticed this but somewhere when I upgraded my ZTE Open from 1.0 to 1.2, the Software Home button was enabled and I noticed it.

This button will turn out to be important when tablets for Firefox OS become available.

You don't need to worry about this, but if you want to, you can always put in that extra bit of CSS. In any case, make sure you actually detect what your screen size is and act accordingly.

Upgrading the ZTE Open to 1.3 or 1.4

By the way, if you have a ZTE Open, André also dug up some links on how to upgrade the ZTE Open to Firefox OS version 1.3 or 1.4. Again, thank you, André!

Upgrade to Firefox OS 1.3 at http://www.gizbeat.com/4223/how-to-build-firefox-os-1-3-2/.

Upgrade to Firefox OS 1.3 at http://blog.chellinsky.net/putting-firefox-os-v1-4-on-a-zte-open/.

Viewing Screen Sizes

I actually forgot to put in the code of how to generate the numbers you see in the screen shots above. Start out with the code from my latest CSS Shell code (adapt if you're using Canvas or SVG) at http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html.

First I added a bit to the body to give the information a place to display:

  <h3>Width</h3>
    <p id="ow">Outer Width</p>
    <p id="iw">Inner Width</p>
  <h3>Height</h3>
    <p id="oh">Outer Height</p>
    <p id="ih">Inner Height</p>
Then I added this code in the section that runs after the page is loaded:

      // Get height and width.
      ow.textContent =
        "Outer Width = " + window.outerWidth;
      iw.textContent =
        "Inner Width = " + window.innerWidth;
      oh.textContent =
        "Outer Height = " + window.outerHeight;
      ih.textContent =
        "Inner Height = " + window.innerHeight;

You can also put this into console.log format. The important thing is that you know the inner and outer width and height, so you can program accordingly, but in this case, also display it so you can see what you are dealing with when looking at various devices.