Strange Safari Behavior Width (iOS) Inner / Outer Width / Height

Question

I’m working on a mobile version for one of our services at work and I’m working in some ways: jqTouch , and the orientation function makes me a little difficult.

Therefore, trying to find the best way to get an approximate value (profile or landscape), I found that Mobile Safari returns some strange values ​​for innerWidth / innerHeight / outerWidth / outerHeight.

I did this test with iPhone4 with iOS 4.3

The results of my tests:

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 the current orientation is a profile that moves it 90 degrees clockwise to Landscape

The main problems that I see are:

• window.outherHeight always matches what is displayed on the keyboard.
• Also with a keyboard. Rotating 180 degrees from Landscape to Landscape, the return values ​​are the expected values ​​for the orientation of the profile.

If you want to do some additional testing, here you need to do something, you need a jqTouch web page.

 $(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 in your web page.

What I did was make turns as indicated in the test results. We copied the contents of the text field and sent it by e-mail. This with a keyboard, and with a keyboard and without it, shows the keyboard if you press a text field;)