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

@jonathantneal, I can share the source code and release it under MIT license it. Please consider that it's a 15 minutes projects, the output at http://cubiq.org/dropbox/width/results.php is just a quick demo, data should be presented into a table not a list. Also we should double check if data is collected properly and also I'm not completely convinced by the JSON structure.

If the device is orientation aware the process is bullet proof. Otherwise we should make a more detailed step by step procedure asking the user to rotate the device in the correct position. False positives can be avoided collecting more results for the same device.

Data is currently stored into a sqlite db, the JSON file you see at http://cubiq.org/dropbox/width/collect.php is a duplicates-free output.

Data collected should be freely accessible to anyone, would be nice to set up an API where you can query the DB by user-agent and get back the right screen size.

I've wanted to crowd source this info for the past year—ever since Greg and I started testing our devices and finding ridiculous differences. In the past year, another zillion new devices have come out — each with their own quirks. I just A) don't own all devices ;) and B) don't have the skillz to really make it automated (and Greg's too busy).

That said, I would LOVE it if we could build something whereby people with devices could run the tests, the info is stored and then retrievable by many. I think it's important for accuracy to have more than one test on a device (who knows what a variety of different setup/OS/etc will do). I know from my own testing that reports vary by browser on the same device, so it's important to record the browser as well as the OS and device.

I'm "all in" in any way I can assist in this project as it unfolds. :) We own an iPad 1, iPad 2, (2) Galaxy Tab, (2) Galaxy 10.1, Xoom, Playbook with one of the newer Amazon/Nook type tablet we'll be getting shortly. Handhelds are Droid2, Nexus One, Blackberry Torch, iPhone 3G, Atrix, Galaxy S II (I think that's what it is, it's with Greg now)... Maybe something else, can't remember. All that's to say, that's all I can personally know about without something like this. But if we crowd source & compile, we at least have data to make decisions by (though there's nothing like really viewing your project on a real device).

@cubiq - I just ran my Atrix through your test... Two things I see if this is developed. We're going to have to have a way to put in what type of mobile it is, yes? The Atrix reports things oddly (even found a thread about it here: http://www.tera-wurfl.com/forum/viewtopic.php?f=2&t=96) ... also, you can change your user agent string in Android pretty easily. It would be a shame to have someone change it, not note that somewhere, and report something incorrect.

Same thing with the actual browser. Since most of the Android browsers are webkit based, we'll need to have a way to specify default browser vs Dolphin vs Skyfire (or any others). I found a list someone has going here: http://www.zytrax.com/tech/web/mobile_ids.html But good lord it's all over the place (and for instance, for Dolphin it says the strings are scattered about the manufacturer's website... So maybe grab the string AND let them report as well?

OK, that's my brain dump for now...

@cubiq - I just tried to ran your app on my webOS devices but had no luck so far. So these user-agent strings might be useful in case the devices are of any interest.

palm Pre Plus:

Mozilla/5.0 (webOS/2.1.0; U; en-GB) AppleWebKit/532.2 (KHTML, like Gecko) Version/1.0 Safari/532.2 Pre/1.1

HP TouchPad:

Mozilla/5.0 (hp-tablet; Linux; hpwOS/3.0.4; U; en-GB) AppleWebKit/534.6 (KHTML, like Gecko) wOSBrowser/234.76 Safari/534.6 TouchPad/1.0

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?