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

I discovered some weird behaviour on the BlackBerry Playbook (1.0.8.4985)

Just testing the meta viewport alone has some odd results (note meta-width test in landscape is wacko):

meta none: p 1024x1598 - l 1024 x 512
meta width: p 600 x 936 - l 600 x 300
meta width initial: p 600 x 936 - l 1024 x 512
meta width initial maximum: p 600 x 936 - l 1024 x 512

I noticed this was not the same as other site's I've built & tested on the Playbook. I discovered that if you include the BB proprietary HandheldFriendly rule <meta name="HandheldFriendly" content="True" />, then the meta viewport test results are consistent.

Include: <meta name="HandheldFriendly" content="True" /> plus meta viewport

meta none: p 1024x1598 - l 1024 x 512 (HandheldFriendly content="False")
meta width: p 600 x 936 - l 1024 x 512
meta width initial: p 600 x 936 - l 1024 x 512
meta width initial maximum: p 600 x 936 - l 1024 x 512

Just another day building for mobile devices, sigh!

Samsung Galaxy SCP (GT-I9003)
Android 2.3.4 (Gingerbread)
Stock Browser

• meta-none: p 800x1130 - l 800x358 - p,l 800x1130 - l,p 800x1130
• meta-width-initial-maximum: p 320x452 - l 533x239 - p,l 533x239 - l,p 533x239
• meta-width-initial: p 320x452 - l 533x239 - p,l 320x452 - l,p 533x239
• meta-width: p 320x452 - l 533x239 - p,l 320x452 - l,p 320x452

I was thinking to a way to automate the data collection.
I've set up a quick demo page which automatically collects all screen dimensions by asking the user to rotate the device.
The result is a json file like this http://cubiq.org/dropbox/width/collect.php that can be a displayed a little better like so http://cubiq.org/dropbox/width/results.php

The data collection itself is at http://cubiq.org/dropbox/width/ (mobile device only!). What do you think? Better ideas on how to export the JSON?

That is excellent! Makes reporting much easier! On the other hand, the lockstep steps may get messed up when the one step goes awry. I somehow got out of sequence, so the data for my test may be off. I expect others will as well. Not sure what the overall solution is there. I also started in landscape mode, not sure if your setup handles that issue of random starting position. And just a minor thing, but the results page is a little confusing because you expect to see your results and the first thing you see is, e.g. an ipad user agent. Made me think it detected wrong until I scrolled down a ways. A simple explicit page title like" All Results" would fix that minor issue. I think it'll be a pretty great data set with this in the end, though.

…

On Dec 2, 2011 10:44 AM, "Matteo Spinelli" < ***@***.***> wrote: I was thinking to a way to automate the data collection. I've set up a quick demo page which automatically collects all screen dimensions by asking the user to rotate the device. The result is a json file like this http://cubiq.org/dropbox/width/collect.php that can be a displayed a little better like so http://cubiq.org/dropbox/width/results.php The data collection itself is at http://cubiq.org/dropbox/width/ (_mobile device only!_). What do you think? Better ideas on how to export the JSON? --- Reply to this email directly or view it on GitHub: https://gist.github.com/1410787

Few notes: - it doesn't matter which orientation you start from, the app works with any initial orientation - if you feel something gone wrong, just start over, you can't do much damage ;)

And just a minor thing, but the results page is a little confusing because you expect to see your results and the first thing you see is, e.g. an ipad user agent.  Made me think it detected wrong until I scrolled down a ways. A simple explicit page title like" All Results" would fix that minor issue.

Agreed. fixing it right now.

Was going to report with Opera Mini on my droid 2 global, but it comes up as unsupported.

On Fri, Dec 2, 2011 at 11:28 AM, Matteo Spinelli < ***@***.*** > wrote: Few notes: - it doesn't matter which orientation you start from, the app works with any initial orientation - if you feel something gone wrong, just start over, you can't do much damage ;) > And just a minor thing, but the results page is a little confusing > because > you expect to see your results and the first thing you see is, e.g. an > ipad > user agent. Made me think it detected wrong until I scrolled down a > ways. > A simple explicit page title like" All Results" would fix that minor > issue. Agreed. fixing it right now. --- Reply to this email directly or view it on GitHub: https://gist.github.com/1410787

## +++++++++++++++++++++++++++ BitLucid.com http://bitlucid.com/ - BitLucid, Inc. - Web & Programming Consultants ninjawars.net - My webgame project github.com/tchalvak/ninjawars - My open source projects dnaexmosn.deviantart.com - Art Gallery 585-519-7658 - Cell 585-502-7658 - Office Number "Never compare your inside with somebody's outside."

Opera Mini is not orientation aware. we can set a custom procedure for browsers that do not support orientation change, but I'd like to know what the original poster (and others) think about the project and if it is worth spending more time refining it.

…

On Fri, Dec 2, 2011 at 6:15 PM, Roy ***@***.*** wrote: Was going to report with Opera Mini on my droid 2 global, but it comes up as unsupported.

I'll be back at lunch to update this based on all of your contributions. Thanks everyone!

@kurtcoda and @quimcalpe - your results were added.

@jamesgpearce, yes, i hope this data correlates with your results. I was unaware of other projects, and I had no idea there would be this kind of contribution from the community.

@cubiq and @stefsullrew, yes, I agree that a spreadsheet of this data would be much more useful. I also agree that automating the data collection would be ideal, but like @tchalvak mentioned, I would want to make sure the automation doesn't allow for faulty results due to which orientation the device was loading the page with.

@cubiq, I'd be up for refining the project as long as we all knew and shared our goals for what to do with the results. This project has far exceeded the scope I was originally looking for, but that's no reason to deny the wealth of information this could provide for so many others. One thing that bothers me is how unreadable these charts could become. I favor storing the data json somehow, because with json we can create all sorts of readable and visually stimulating charts.

It's very cool. Can I also suggest we consider beaconing the data into BrowserScope?

@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?