Develop Reference

Which emulator should I use for a Huawei Y300 and Y530?

I am trying to emulate a Huawei Y530. According to this site, it has the following specifications:
Screen: 480 x 854 pixels, 4.5 inches (~218 ppi pixel density)
This is what my WEB APP looks like on the actual device:
And this is what it looks like on a emulator, with the following specification:
Target: Android 4.3 - API Level 18
Device: 4" WVGA (Nexus S) (480x800 hdpi)
I know there is a difference in the height of the two devices, but still I believe that the emulator should show something similar to what the actual device is showing.
I tried to find the innerWidth and innerHeight of the real device with the following code:
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
alert (viewportwidth);
alert(viewportheight);
The result is width: 320px and height: 544px
The innerWidth on the emualtor is: 480px and the innerHeight: 756px
Since the real device had a width of 320px, i tried using an emulator with the following specs:
Screen: 3.2" QVGA (ADP2) (320 x 480 mdpi)
With the following result:

You can always create a new emulator if the app will be developed only for this particular phone. The image attached emulates the exact properties of the Huawei Ascend Y530 phone.
Alternatively, if the app is being developed for different phone having different screen sizes, I would take a look at the xml file for the layout. Take note of the following attributes, like placing form widgets in relation to other widgets. For example: android:layout_toRightOf="#+id/ukFlag" for the Danish flag. There are actually several layout parameters you can paly around with until you get the right layout:
Layout_toLeftOf
Layout_toRightOf
Layout_above
Layout_below
You can also setup the positioning of the widget, to be either left_based, right_based or centred.
Hope this would help you better: Android Layouts

Without knowing too much in how you have done your application, it seems you are using fixed units like pixels to specify size. As this project is a web app, maybe you should consider to use what is called a Responsive Design approach. In that way your content can adjust to whatever size the screen is.
I'll let you a couple of useful articles to learn more about this:
Responsive Web Design in Wikipedia
Responsive Design Presentation
Responsive Design Examples

Android phonegap app scaling too large

I designed my Android phone gap app to be the dimensions of width: 480px height: 320px and the app has a zoom set on it to scale up fit the screen size of a 7 inch tablet which has the resolution of 1280 x 1024.
I've tried multiple ways to use zoom: 110% or so to get the app to scale to fit the screen, but when I run the app inside the actual environment it appears much larger than the screen. Did I miss something do I need meta code to emulate my scaling better the way it works inside a web browser?
Inside my head I have
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name="viewport" content="width=480,height=320">
Any help provided would be great.

I think you should read this article
Basically you should consider screen density not the actual width or height of device and than try to compensate with zoom.Check the section "Building web pages to support different screen densities"

Can't make the viewport meta tag work

I'm currently developing a website that is designed to display best on iPad, but must display nicely on most mobile browsers.
I based the css on a width of 2048px, which is the pixel width of the iPad 3 when in landscape mode.
I then used the viewport meta tag as written below :
<meta name="viewport" content="width=2048" />
Having read the Apple documentation and the Android one regarding this topic, I was made to understand that a mobile browser first renders the webpage in a larger area defined by the viewport meta tag, then scales it down to match the device width.
This works very well on an iPad 2, but the width overflows on an iPhone, an iPhone Retina and a Galaxy Nexus. I didn't have the opportunity to test the website on an iPad 3.
How can this behaviour be explained?
If any detail were to be added on this issue, please let me know.
Thanks in advance for your help.

Read through http://developer.android.com/guide/webapps/targeting.html#ViewportScale
The trick is figuring out the balance between the device width and your viewport scale.
Specifically:
The default initial scale is calculated to fit the web page in the viewport size. Because the default viewport width is 800 pixels, if the device screen resolution is less than 800 pixels wide, the initial scale is something less than 1.0, by default, in order to fit the 800-pixel-wide page on the screen.
If you set your initial scale to 2, the page will be zoomed in. If you set it to .5, you will be zoomed out. Min and max can also overwrite these attributes

what "font size" measurement should i use in titanium?

Given that it is for both android and ios devices, and given that i'd like the screens to be pretty consistent across different screen sizes/resolutions?
I'm using font-size right now, but there is a massive disparity between what the android emulator shows and what an actual android device displays.

Try this, you can you without any measurement (dpi or px). this is working. bye the way you also you with (dpi or px) on your requirement.
var name = Ti.UI.createLabel({
backgroundColor : "#e3e3e3",
text : data_ary[z].name,
height : "40",
left : "70",
width : "auto",
color : "#2c2c2c",
font : {fontSize : 18,fontWeight: "bold"},
});

so my question (now fixed) was a bit... wrong? I noted that i was using fontSize without really specifying what that meant.
I really should have noted that i was using fontSize without any units of size. Following on from Richard's suggestion, i'm using the units "sp", so for example:
font: {fontSize: '14sp'}

screen.width and screen.height different values in different APIs/devices

Edit: also happens with $('body').width() and window.outerWidth
API 2.3.3 HVGA
Before and after rotating device outputs same screen width (320)
API 3.0 WXGA
Width and height toggle each rotation for example
starts with screenWidth:1280 screenheight: 800
I rotate 90
now has screenWidth:800 screenheight: 1280
so what do I do if I want to make certain changes on rotations
according to dimensions and want to target all APIs? I need a value which is the same for all devices.
Edit: For certain things I need pixel values, not percentages. That's why I'm using Javascript to calculate size based on screen width. This would work, since screen width is also pixel values and I can keep things proportional. But if sometimes screen.width gives me the current width, and others not, I can't use it...
-> The thing is I started working with a slider which uses absolute layout and needs pixel values for everything. I don't want to reimplement the slider, so I decided to calculate dynamically the size of the images and the whole layout using screen width. And initialize the slider with these values.
update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011
"One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....

Responsive web design techniques. I give a super brief example on my blog along with a book recommendation.
http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

I use media queries in two of my PhoneGap Apps. No javascript, except in
the case of anomalies.
For example, the "base" css could be for width 320 and portrait,
then using the cascading effect of css :-) add blocks like:
#media screen and (max-width: 480px) and (orientation:portrait) { make stuff bigger}
#media all and (min-width: 800px) { make stuff even bigger }
With queries like these in my link'd css files (and the device/os/phonegap
handling of orientation changes) the new layouts happen auto-magically.
NOTE: I learned all this from reading Simon's blog and the materials he suggested.

Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.

I'm not aware how phonegap presents in information for you, but for a native Android application you typically declare different layouts and image resources for various display densities and screen sizes/widths. See this page for more information: http://developer.android.com/guide/practices/screens_support.html