Question

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….

Answer 1

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.