Question

I am building an phonegap app using html5 and css. I have a iBall slide android tablet with screen resolution 800*480.

But when i open the page and check its width using java script it shows different values for all orientation.
I am using this as meta value for viewport:

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

Plus the most confusing part is that when the app is started for the first time after installation, it shows different screen width and height for same orientation when the app is started second or third time.

There are my values:
1st time in landscape mode:
width:640
height:359

1st time in portrait mode:
width:384
height:615

after 1st time in landscape mode:
width:800
height:449

after 1st time in portrait mode:
width:800
height:1281

How am i supposed to target all these screen sizes?

Answer 1

Do you used api.jquery.com/width and api.jquery.com/height ?

Try to put the alert like this

$(window).load(function() { 
   alert($(window).height()); 
   alert($(window).width()); 
});

then try to put this

$(window).resize(function() { 
   alert($(window).height()); 
   alert($(window).width()); 
});

and then tell me what’s happens if you rotate your device.