问题
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....
回答1:
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
回答2:
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.
回答3:
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.
回答4:
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
来源：https://stackoverflow.com/questions/9334221/screen-width-and-screen-height-different-values-in-different-apis-devices