Using Percentages in Titanium for Fluid/Responsive design

Question

Is there anyway when using the Titanium Appcelerator to use Percentages. For fluid and responsive design; otherwise looks like I am going to struggle with IF ELSE statements for all devices!

Original Code

    WebViewWindow=Titanium.UI.createWebView({
    html:globalHTMLHeadert,
    visible:true,
    width:100%, //note I have tried also "100%" with/out comma
    left:0,
    bottom:30%,
    zIndex:400
});

I want

WebViewWindow=Titanium.UI.createWebView({
    html:globalHTMLHeadert,
    visible:true,
    width:320,
    left:0,
    bottom:150,
    zIndex:400
});

Answer 1

Simple.

Create a new file called frames.js

/*
 * Frames
 * @ We uses this framework to allow mobility for responsive design
 * @ Each variable is used and this is the width based on the device
 */
// 100%
var per100 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 1.0); 
// 90%
var per90 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.9); 
// 80%
var per80 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.8); 
// 50%
var per50 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.5); 
// 40%
var per40 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.4);
// 25%
var per25 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.25); 
// 10%
var per10 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.10); 
// 5%
var per5 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.05); 
// 1%
var per1 = Math.floor(Titanium.Platform.displayCaps.platformWidth * 0.01);

Now, include frames.js in your js files.

You can use it as such, this would be a fluid button, 90%

var btngeorgia=Titanium.UI.createButton({
    color:'#d8d8d8',
    borderRadius:'2px',
    height:30,
    width:per90,
    zIndex:800,
    left:10,
    bottom:100,
    title:'Georgia',
    font:'Georgia',
});

This would be a web view at 100% the fluid device width

WebViewWindow=Titanium.UI.createWebView({
    html:globalHTMLHeadert,
    visible:true,
    width:per100,
    left:0,
    bottom:220,
    zIndex:300
});

Answer 2

The below site is from the developer blog. it talks about a property that was included in 1.7 to swap over so that titanium will automatically scale your apps for you.

turning this option on means that you don't need to work out percentages or anything like that. if it looks good on the iphone emulator it will scale to look the same on all devices.

http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html

It also mentions using '15dp' for density pixels which will give you a unified pixel size no matter what screen resolution your on.

and finally you can in fact use percentages such as width:'100%', in your apps.

http://developer.appcelerator.com/question/46501/using-percentages-to-set-sizes

here is a post where someone wasn't using quotes and later marked the answer as correct