Resolution Independent Applications

Table of Contents

Intel AppUp® Encapsulator Compatibility for this Article
FeatureSupported?
JavaScript* yes
CSS yes

Introduction

One of the cornerstones of a quality app is the ability to adapt to different device environments. One of the most difficult environment characteristics is the device screen size. It is impossible and unwise to hard code all possible screen resolutions. Therefore it is paramount that an app can automatically adjust itself to any screen size. Whether in a smartphone or a desktop, successful apps can be designed to be independent of the screen resolution. In this article, we discuss user interface designs to implement an app with dynamic resolution. We will be using HTML5, JavaScript* and CSS in this demo/article.

Technical Information

The demo will basically compose of two parts, setting up the page with CSS and then doing auto-resizing using JavaScript*.

Part 1: Setting Up Page

We must design and setup the page correctly for dynamic resizing. To accomplish this, we will use CSS and JavaScript*. First, we must choose where the game area will exist on the page. Typically, good app design often has the majority of the screen having interaction and a small section showing stats. It's excellent design practice to use div tags, this allows future children to inherit the same attributes later if you add more elements into the area. In the demo, we will have a game area covering most of the page and have a small update banner area at the bottom.



We want to use JavaScript* to manipulate the actionArea, to accomplish this we will add some CSS properties as well. This property is to prep work for resizing. Using left and top as 50% will place the action area in the center of the screen. We use percentage because the raw actually pixel center is unique for different screen resolutions. Thinking in terms of pixel size is helpful initially, but good design practice should eventually be perceived as percentage. The canvas will stretch across the entire screen and we also want to put a small banner at the bottom.

#actionArea { position: absolute; left: 50%; top: 50%; } #gameCanvas { width: 100%; height: 100%; } #statsPanel { position: absolute; width: 100%; height: 8%; bottom: 0; opacity: 0.8; } -->
<div id=”actionArea”>
  <canvas id=”actionCanvas”></canvas>
  <div id=”updateBanner”></div>
</div>

#actionArea {
  position: absolute;
  left:     50%;
  top:      50%;
}

#actionCanvas {
  width: 100%;
  height: 100%;
}
#updateBanner {
  position: absolute;
  width: 100%;
  height: 8%;
  bottom: 0;
  opacity: 0.8;
}




Part 2: Resizing based on Aspect Ratio

Just like TV and movies, app should consider aspect ratio. There are a variety of popular aspect ratios, but 4:3 is typically the smartest ratio. It covers most screens in the market and is often a safe bet in maintain good appearance, even if the device is a wide screen.

We are going to create a function that can dynamically resize the app based on the aspect ratio. First, we need to extract the device's screen information. We need to get the action area, which was defined earlier, and also determine the current screen size info.

var actionArea = document.getElementById('actionArea');
var aspectRatio = 4 / 3;
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
var newWidthToHeight = window.innerWidth / window.innerHeight;

Not we must calculate the differences between the actionArea and the actually device screen size. The device could either have a width difference or height difference. If there is a difference, we must add filler space into the actionArea. widthToHeight) { newWidth = newHeight * widthToHeight; actionArea.style.height = newHeight + 'px'; actionArea.style.width = newWidth + 'px'; } else // screen has extra height, so we add some filler space { newHeight = newWidth / widthToHeight; actionArea.style.width = newWidth + 'px'; actionArea.style.height = newHeight + 'px'; } -->

// screen width has extra width, so we add some filler space
if (newWidthToHeight > aspectRatio) 
{
  newWidth = newHeight * aspectRatio;
  actionArea.style.height = newHeight + 'px';
  actionArea.style.width = newWidth + 'px';
} 
else // screen has extra height, so we add some filler space
{ 
  newHeight = newWidth / aspectRatio;
  actionArea.style.width = newWidth + 'px';
  actionArea.style.height = newHeight + 'px';
}

With the filler space complete, we need to center the action area into the center of the screen.

actionArea.style.marginTop = (-newHeight / 2) + 'px';
actionArea.style.marginLeft = (-newWidth / 2) + 'px';

Finally, we must commit these changes to the app resolution.

document.getElementById('actionCanvas').width = newWidth;
document.getElementById('actionCanvas').height = newHeight;

Below is the combined complete function.

aspectRatio) { newWidth = newHeight * aspectRatio; actionArea.style.height = newHeight + 'px'; actionArea.style.width = newWidth + 'px'; } else // screen has extra height, so we add some filler space { newHeight = newWidth / aspectRatio; actionArea.style.width = newWidth + 'px'; actionArea.style.height = newHeight + 'px'; } actionArea.style.marginTop = (-newHeight / 2) + 'px'; actionArea.style.marginLeft = (-newWidth / 2) + 'px'; document.getElementById('actionCanvas').width = newWidth; document.getElementById('actionCanvas').height = newHeight; } -->
function resizeScreen() {
    var actionArea = document.getElementById('actionArea');
    var aspectRatio = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = window.innerWidth / window.innerHeight;

    
    // screen width has extra width, so we add some filler space
   if (newWidthToHeight > aspectRatio) 
   {
     newWidth = newHeight * aspectRatio;
     actionArea.style.height = newHeight + 'px';
     actionArea.style.width = newWidth + 'px';
   } 
   else // screen has extra height, so we add some filler space
   { 
     newHeight = newWidth / aspectRatio;
     actionArea.style.width = newWidth + 'px';
     actionArea.style.height = newHeight + 'px';
   }

    
    actionArea.style.marginTop = (-newHeight / 2) + 'px';
    actionArea.style.marginLeft = (-newWidth / 2) + 'px';
    
    document.getElementById('actionCanvas').width = newWidth;
    document.getElementById('actionCanvas').height = newHeight;
    }



Part 3: Automatically Listening

That last part is to make sure the browser will automatically detect the need to automatically resize the app. To achieve this, we will add listeners to invoke the resize function we just created.

window.addEventListener('resize', resizeScreen, false);
window.addEventListener('orientationchange', resizeScreen, false);

Sample Code

The link to the entire function and sample source code here:

-->

More resources

This is a section to refer to other great articles, tutorials, reference documents, etc ... Some good places to look for more information might include:

  1. Mozilla Developers Network

  2. W3C HTML 5 Reference

  3. Dive into HTML5

Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.