Some code I contantly use reflows the screen based on the size of the browser
On Desktops this can get fiddly but on a known browser like BB it's pretty easy
Basically you need something like this (note JQuery)...
var wh = window.innerHeight;
var ww = window.innerWidth;
$(document).ready(function() {
// Positioning code
});
How you actually do the positioning depends on your HTML
As long as something has an id it can be sized as you desire
Say you've got a div or canvas with id='main'
It's as simple as adding the following after the comment in the ready function
$('main').css('width', ww + 'px');
$('main').css('height', wh + 'px');
Everything else can easily be overlaid or repositioned using ww and wh with similar code
I tend to use overlays with a z-index and absolute positioning so that regardless of the screen dimensions everything is where its meant to be
As long as you know the size of your assets the maths is simple
Top or left positioning is always the same
Right positioning is ww - <image width> - position
Bottom positioning is wh - <image height> - position
Center relative positioning is like right and bottom but dividing ww / wh by 2
This allows you to always have things in the right places regardless of the screen res.
Some caveats are that you may be dealing with a particularly small or large screen so you may need different images for specific resolution breaks although you can also choose which image to use based on ww and wh - again assuming each img has an id you need something as simple as $('img123').attr('src', <res directory>'/image.png');
An extension to this is catering for orientation change although this is somewhat more complicated as you have to snapshot your initial orientation so consistantly get everything in the right place as the results of the width and height measurements are only correct on initial load (height goes wonky later). Having initial readings for everything means you always know how to size and flow the screen.
Personally I always create a reflow() function for such purposes as it makes orienttion changes and possibly image changes easy to deploy
Click the like button if you find my posts useful!
