Set values for top, right, left, bottom so that the position remains same in all the mobile devices.

Hi all

I am working on a app, where I have manually set the left, right, top and bottom for some elements, when I test it on the larger phones, they are looking good, but if I deploy the same app on to the smaller phone, the positions are not the same as the one that I saw in the larger phone.

index.js

var lblTitle = Ti.UI.createLabel({
        text: Alloy.Globals.myDetails[e.source.id].title.toUpperCase(),
        color: "#0099ff",
        top: 62,
        left:45,
        font: {
         fontSize: 18,       
         fontWeight:"bold"
        }       
    }); 
 
    var lblContent= Ti.UI.createLabel({
        text: Alloy.Globals.myDetails[e.source.id].content,     
        color: "#002d4c",
        top: 100,
        left: 40,
        right: 40,
        font: {         
            fontSize: 12
        }       
    });
 
    var lblRole = Ti.UI.createLabel({
        text: Alloy.Globals.myDetails[e.source.id].role.toUpperCase(),
        color: "#990000",
        bottom: 60,
        right:60,
        font: {
            fontSize: 36,           
            fontWeight: "bold"
        }       
    });
//   add controls to the contentView        
    $.contentView.removeAllChildren();
    // $.contentView.add(closeButton);
    $.contentView.add(lblTitle);
    $.contentView.add(lblContent);
    $.contentView.add(lblRole); 
    $.contentView.visible = true;

Thanks

Varun Krishna. P