Strange behavior width Safari (iOS) inner/outer width/height [closed]

Question

I have been working on a mobile version for one of our services at work, and have been doing some fidling around with jqTouch, and the orientation feature bugs me a bit.

So while trying to find a better way to get orientation value (profile or landscape), i found that Mobile Safari is returning some strange values for innerWidth/innerHeight/outerWidth/outerHeight.

I have done these test with an iPhone4 with iOS 4.3

My test results:

No keyboard    |  window.innerWidth    window.innerHeight    window.outerWidth    window.outerHeight
---------------------------------------------------------------------------------------------------
Pro --> Lan    |                480                   268                  482                   420
Lan <-- Pro    |                321                   418                  321                   419
Pro <-- Lan    |                480                   268                  482                   420
Lan -->--> Lan |                480                   268                  482                   420
Lan <-- Pro    |                321                   418                  321                   419

With keyboard  |  window.innerWidth    window.innerHeight    window.outerWidth    window.outerHeight
---------------------------------------------------------------------------------------------------
Pro --> Lan    |                321                   418                  321                   419
Lan <-- Pro    |                481                   269                  481                   419
Pro <-- Lan    |                321                   418                  321                   419
Lan -->--> Lan |                481                   269                  481                   419
Lan <-- Pro    |                481                   269                  481                   419

Pro = Profile

Lan = Landscape

So Pro --> Lan means current orientation is Profile moving it 90 degree clockwise to Landscape

The main issues as i see it:

• window.outherHeight is always the same value when the keyboard is showing.
• Also with keyboard When rotating 180degree from Landscape to Landscape the returned values are the expected values for a profile orientation

If you want to do some further testing, here's something to get you going, you ofcourse need a jqTouch configured webpage.

$(document).ready(function(){
    $('body').bind('turn', function(event, info){ var dims = $('#debug').val(); dims = dims + getDimensions(); $('#debug').val(dims); });
});

function getDimensions() {
return "screen.width = " + screen.width
     + "\nscreen.height = " + screen.height
     + "\nscreen.availWidth = " + screen.availWidth
     + "\nscreen.availHeight = " + screen.availHeight
     + "\nwindow.innerWidth = " + window.innerWidth
     + "\nwindow.innerHeight = " + window.innerHeight
     + "\nwindow.outerWidth = " + window.outerWidth
     + "\nwindow.outerHeight = " + window.outerHeight
     + "\n \n ";
}

Add <textarea id="debug" style="width: 100%; height: 300px;"></textarea> somewhere on your webpage.

What i did was doing the rotions as indicated in the test results. Copied the content of the textarea, and send them in an email-to-self. Did this both with and without keybord, keyboard shows if you tap the textarea ;)

Unalienable

I realize this is out of date a bit, but I'm sorry, I fail to see your question. Your findings, while they seem strange, make perfect sense. When the keyboard is showing, it is taking up valuable screen space, thereby causing the window size to be smaller (also, trying to not to be picky, but the orientations are referred to as portrait and landscape, vs profile and landscape). If this is not meant to be a question, then I'm afraid you have posted this on the incorrect site, this is a Q/A site. – Upu