innerWidth / innerHeight tests @ http://sandbox.thewikies.com/orientation/

orientation-tests.txt

innerWidth / innerHeight tests @ http://sandbox.thewikies.com/orientation/

--------------------------------------------------------------------------------

Tested (14 devices, 28 browsers):
	Droid 2 Global Android 2.2
	iPhone 4 iOS5 (Safari, Opera Mini)
	Motorola Atrix Android 2.3.4 (Stock browser, Dolphin, Skyfire, Opera Mini, Firefox)
	Samsung Galaxy S9000 Android 2.3 (Webkit, Opera Mobile)
	Samsung Galaxy Y Android 2.3.5
	Nokia N9 (MeeGo) (Webkit, Opera Mobile)
	Palm Pre Plus webOS 2.1.0 Build 284
	Palm Pre 2 (WebOS 2.1) (Webkit, Opera Mobile)

	Galaxy 10.1 Android 3.2 (Webkit, Dolphin, Opera Mini)
	HP TouchPad
	iPad 1 iOS5 (Safari, Opera Mini)
	iPad 2 iOS5
	Motorola Xoom Android 3.2.1 (Stock browser, Dolphin, Skyfire, Firefox)


================================================================================


"p" describes the result of loading the test with the device portrait oriented (taller).

"l" describes the result of loading the test with the device landscape oriented (wider).

"p,l" describes the result of loading the test with the device portrait oriented and then rotated to landscape. 

"l,p" describes the result of loading the test with the device landscape oriented and then rotated to portrait.


================================================================================


Droid 2 Global Android 2.2 (handheld):
	Web browser (webkit):
		                 meta-none: p 800x1220 - l 800x335
		                meta-width: p 320x488  - l 569x239
		        meta-width-initial: p 320x488  - l 569x239
		meta-width-initial-maximum: p 320x488  - l 569x239

--------------------------------------------------------------------------------

iPhone 4 iOS5 (handheld):
	Safari:
		                 meta-none: p 980x1091 - l 981x425
		                meta-width: p 320x356  - l 320x139
		        meta-width-initial: p 320x356  - l 480x208 - p,l 320x139
		meta-width-initial-maximum: p 320x356  - l 480x208

	Opera Mini:
		                 meta-none: p 320x416  - l 480x256
		                meta-width: p 320x416  - l 480x256
		        meta-width-initial: p 320x416  - l 480x256
		meta-width-initial-maximum: p 320x416  - l 480x256
		* note: opera mini does not reflow the layout on orientation change, so these numbers are not changed.

--------------------------------------------------------------------------------

Motorola Atrix Android 2.3.4 (handheld):
	Stock browser:
		                 meta-none: p 960x418  - l 800x1241
		                meta-width: p 360x559  - l 640x279
		        meta-width-initial: p 360x559  - l 640x279
		meta-width-initial-maximum: p 360x559  - l 640x279

	Dolphin:
		                 meta-none: p 800x1161 - l 960x364
		                meta-width: p 360x523  - l 640x243
		        meta-width-initial: p 360x523  - l 640x243
		meta-width-initial-maximum: p 360x523  - l 640x243

	Skyfire:
		                 meta-none: p 800x1176 - l 800x351
		                meta-width: p 360x529  - l 640x281
		        meta-width-initial: p 360x529  - l 640x281
		meta-width-initial-maximum: p 360x529  - l 640x281

	Opera Mini:
		                 meta-none: p 318x450  - l 565x203
		                meta-width: p 318x450  - l 565x203
		        meta-width-initial: p 318x450  - l 565x203
		meta-width-initial-maximum: p 318x450  - l 565x203
		* note: opera mini does not reflow the layout on orientation change, so these numbers are not changed.

	Firefox:
		                 meta-none: p 800x1366 - l 800x418
		                meta-width: p 360x615  - l 640x335
		        meta-width-initial: p 360x615  - l 640x335
		meta-width-initial-maximum: p 360x615  - l 640x335
		* note: firefox does not reflow the layout on orientation change, so these numbers are not changed.

--------------------------------------------------------------------------------

Nokia N9 (MeeGo) (handheld):
	Web (webkit):
		                 meta-none: p 980x1519 - l 978x465
		                meta-width: p 320x496  - l 567x269 - p,l 320x152 - l,p 140x270
		        meta-width-initial: p 320x469  - l 567x269 - p,l 320x152 - l,p 140x270
		meta-width-initial-maximum: p 320x496  - l 567x269 - p,l 320x152 - l,p 140x270

	Opera Mobile (old preview):
		                 meta-none: l 488x184
		                meta-width: l 488x184
		        meta-width-initial: l 488x184
		meta-width-initial-maximum: l 488x184
		* note: Opera Mobile (old preview) does not have portrait mode

--------------------------------------------------------------------------------

Palm Pre Plus webOS 2.1.0 Build 284
	web v2.1.0 (webkit):
		                 meta none: p 960x1400 - l 960x1400
		                meta width: p 320x452  - l 320x1400
		        meta width initial: p 320x452  - l 320x320
		meta width initial maximum: p 320x452  - l 320x320
		* note: web does not reflow the layout on orientation change, so these numbers are not changed.

--------------------------------------------------------------------------------

Palm Pre 2 (WebOS 2.1) (handheld):
	Stock browser:
		                 meta-none: p 960x1400 - l 960x1400
		                meta-width: p 320x452  - l 320x452
		        meta-width-initial: p 320x452  - l 320x452
		meta-width-initial-maximum: p 320x452  - l 320x452

--------------------------------------------------------------------------------

Samsung Galaxy S9000 Android 2.3 (handheld):
	Web browser (Webkit):
		                 meta-none: p 800x1130 - l 800x357
		                meta-width: p 320x452  - l 533x239
		        meta-width-initial: p 320x452  - l 533x239 - p,l 320x452
		meta-width-initial-maximum: p 320x452  - l 533x239

        Opera Mobile:
		                 meta-none: p 981x1232 - l 980x347
		                meta-width: p 320x403  - l 534x190
		        meta-width-initial: p 320x403  - l 533x189
		meta-width-initial-maximum: p 320x403  - l 533x189
		* note: opera mobile does not reflow the layout on orientation change, so these numbers are not changed.

--------------------------------------------------------------------------------

Samsung Galaxy SCP (GT-I9003) Android 2.3.4 (Gingerbread) (handheld):
	Stock Browser
			             meta-none: p 800x1130 - l 800x358 - p,l 800x1130 - l,p 800x1130
			            meta-width: p 320x452  - l 533x239 - p,l 320x452  - l,p 320x452
			    meta-width-initial: p 320x452  - l 533x239 - p,l 320x452  - l,p 533x239
		meta-width-initial-maximum: p 320x452  - l 533x239 - p,l 533x239  - l,p 533x239

--------------------------------------------------------------------------------

Samsung Galaxy Y Android 2.3.5 (handheld):
	Web browser (webkit):
		                 meta-none: p 800x853  - l 800x440
		                meta-width: p 320x341  - l 427x235
		        meta-width-initial: p 320x341  - l 427x235
		meta-width-initial-maximum: p 320x341  - l 427x235

--------------------------------------------------------------------------------

Galaxy 10.1 Android 3.2 (tablet):
	Web browser (Webkit):
		                 meta-none: p 980x496  - l 980x1392
		                meta-width: p 800x1128 - l 1280x648
		        meta-width-initial: p 800x1128 - l 1280x648
		meta-width-initial-maximum: p 800x1128 - l 1280x648

	Dolphin:
		                 meta-none: p 980x1389 - l 980x506
		                meta-width: p 800x1141 - l 1280x661
		        meta-width-initial: p 800x1141 - l 1280x661
		meta-width-initial-maximum: p 800x1141 - l 1280x661

	Opera Mini:
		                 meta-none: p 471x698  - l 753x415
		                meta-width: p 471x698  - l 753x415
		        meta-width-initial: p 471x698  - l 753x415
		meta-width-initial-maximum: p 471x698  - l 753x415
		* note: opera mini does not reflow the layout on orientation change, so these numbers are not changed.

--------------------------------------------------------------------------------

HP TouchPad - webOS 3.0.4 Build 77 (tablet):
	web v3.0.4 (webkit):
		                 meta none: p 3072x3768 - l 4096x2744
		                meta width: p 768x3768 - l 1024x2744
		        meta width initial: p 768x642 - l 1024x686
		meta width initial maximum: p 768x942 - l 1024x686
		* note: web does not reflow the layout on orientation change, so these numbers are not changed.

--------------------------------------------------------------------------------

iPad 1 iOS5 (tablet):
	Safari:
		                 meta-none: p 980x1185 - l 981x644
		                meta-width: p 768x928  - l 768x504
		        meta-width-initial: p 768x928  - l 1024x672 - p,l 769x505
		meta-width-initial-maximum: p 768x928  - l 1024x672

	Opera Mini:
		                 meta-none: p 768x956  - l 1024x700
		                meta-width: p 768x956  - l 1024x700
		        meta-width-initial: p 768x956  - l 1024x700
		meta-width-initial-maximum: p 768x956  - l 1024x700
		* note: opera mini does not reflow the layout on orientation change, so these numbers are not changed.

--------------------------------------------------------------------------------

iPad 2 iOS5 (tablet):
	Safari:
		                 meta-none: p 980x1185 - l 981x644
		                meta-width: p 768x928  - l 768x504
		        meta-width-initial: p 768x928  - l 1024x672 - p,l 769x505
		meta-width-initial-maximum: p 768x928  - l 1024x672
		* note: these results are identical to the iPad 1.

--------------------------------------------------------------------------------

Motorola Xoom Android 3.2.1 (tablet):
	Stock browser (webkit):
		                 meta-none: p 980x1382 - l 980x496
		                meta-width: p 800x1128 - l 1280x648
		        meta-width-initial: p 800x1128 - l 1280x648
		meta-width-initial-maximum: p 800x1128 - l 1280x648

	Dolphin:
		                 meta-none: p 980x1392 - l 980x502
		                meta-width: p 800x1136 - l 1280x656
		        meta-width-initial: p 800x1136 - l 1280x656
		meta-width-initial-maximum: p 800x1136 - l 1280x656

	Skyfire:
		                 meta-none: p 800x1146 - l 980x534
		                meta-width: p 800x1146 - l 1280x697
		        meta-width-initial: p 800x1146 - l 1280x697
		meta-width-initial-maximum: p 800x1146 - l 1280x697
		* note: this browser has an odd quirk. If you start in landscape & switch to portrait, it refreshes the values. If you start in portrait and change to landscape, it won't change. You must refresh.

	Firefox:
		                 meta-none: p 980x1509 - l 980x576
		                meta-width: p 800x1232 - l 1280x752
		        meta-width-initial: p 800x1232 - l 1280x752
		meta-width-initial-maximum: p 800x1232 - l 1280x752
		* note: firefox does not reflow the layout on orientation change, so these numbers are not changed.


================================================================================


results collected by @stefsull, @drublic, @pascalvos, @alex_gibson, @tchalvak, and @jon_neal

An easy solution for all browsers is to ask the user to start in portrait > rotate > tap to confirm > rotate > tap to confirm > and so on. Maybe we could also check if the device is orientation aware and in that case send the confirmation tap automatically.

Regarding user agent spoofing there's little we can do about it. We could ask what browser/device the user is on at the beginning (trying to auto suggest our best bet looking at the user agent). This would mean making a list of all possibile combinations. Or you want the user to type his/hers browser and device?