public
Last active

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

  • Download Gist
orientation-tests.txt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
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

ungh yes data

Awesome work, guys!

Samsung Galaxy Y (Android 2.3.5)

Stock browser:

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

These are all on initial load, I didn't know if we were supposed to load and then switch orientations or what.

Droid 2 Global Android 2.2 Webkit Browser - Landscape (err, horizontally-long orientation, right?)
meta-none 800x335
meta-width-initial-maximum 569x239
meta-width-initial 569x239
meta-width 569x239

Droid 2 Global Android 2.2 Webkit Browser - Portrait
meta-none 800x1220
meta-width-initial-maximum 320x488
meta-width-initial 320x488
meta-width 320x488

Palm Pre 2 (WebOS 2.1)

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

These are all on initial load, I didn't know if we were supposed to load and then switch orientations or what.

This is one of the key issues though right? Zoom on orientation change after load.

Thanks @alexgibson and @tchalvak, your results have been added.

Finishing the Galaxy 10.1 Android 3.2:

Dolphin browser:
meta-width-initial: l 1280x661 - p 800x1141
meta-width-initial-maximum: l 1280x661 - 800x1141

Opera mini browser:
meta-width-initial: l 753x415 - p 471x698
meta-width-initial-maximum: l 753x415 - p 471x698

(Opera min required a refresh on orientation change to update. Other browsers did not.)

Thanks @stefsullrew, your results have been updated.

Motorola Atrix (Android 2.3.4)

Stock browser:
meta-none: l 800x1241 - p 960x418
meta-width: l 640x279 - p 360x559
meta-width-initial: l 640x279 - p 360x559
meta-width-initial-maximum: l :640x279 - p 360x559

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

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

Opera Mini:
meta-none: l 565x203 - p 318x450
meta-width: l 565x203 - p 318x450
meta-width-initial: l 565x203 - p 318x450
meta-width-initial-maximum: l 565x203 - p 318x450
(Again, Opera requires a refresh on orientation change or it retains the previous numbers.)

Firefox:
meta-none: l 800x418 - p 800x1366
meta-width: l 640x335 - p 360x615
meta-width-initial: l 640x335 - p 360x615
meta-width-initial-maximum: l 640x335 - p 360x615
(Oddly enough, Firefox's dimensions don't change without a refresh after orientation change.)

Thanks @stefsullrew, that's awesome. Added.

Retest to verify Galaxy 10.1 numbers...

Opera Mini:
meta-width is transposed and the portrait is 471x698

Dolphin:
meta-width is transposed (l & p)

Stock browser:
meta-width is transposed but correct (l & p)
meta-width-initial is transposed and portrait is 800x1128

Thanks @stefsullrew, now I think all of these numbers are pretty legit. Yay! :)

Motorola Xoom (Android 3.2.1)

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
(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
(Again, Firefox requires a refresh in either orientation change.)

Added @stefsullrew. I seem repetitious, but it's useful for anyone who reviews this to know that I'm updated with the latest comments. Plus, you're awesome for doing this for us. Thanks.

HP TouchPad - webOS 3.0.4 Build 77
web v3.0.4 (webkit)

meta none: p 3072 x 3768 - l 4096 x 2744
meta width: p 768 x 3768 - l 1024 x 2744
meta width initial: p 768 x 642 - l 1024 x 686
meta width initial maximum: p 768 x 942 - l 1024 x 686

*all dimensions on pageload (refresh after orientation change required)

palm pre plus - webOS 2.1.0 Build 284
web v2.1.0 (webkit)

meta none: p 960 x 1400 - l 960 x 1400
meta width: p 320 x 452 - l 320 x 1400
meta width initial: p 320 x 452 - l 320 x 320
meta width initial maximum: p 320 x 452 - l 320 x 320

*same here: all dimensions on pageload (refresh after orientation change required)

OK, I'm going to enter some testing Greg and I did about a year ago (and have meant to publish). #sigh Our testing is with and without the meta width-device-width. We did not test with initial-scale, etc. Most of these devices are older & in cases of iPad, will be the system from a year ago, not the current iOS5. (You can find our test pages here:
http://assortedgarbage.com/presario/screentest.html (without meta)
http://assortedgarbage.com/presario/screentest_v.html (with meta)

TABLETS:

iPad 1 iOS4 (tablet):
Safari:
meta-none: p 980x1208 - l 661x980
meta-width: p 768x946 - l 768x518

Galaxy Tab (will have to check Android version after it charges):
Default browser:
meta-none: p 800x1183 - l 800x391
meta-width: p 400x591 - l 683x334

Dolphin:
meta-none: p 800x1121 - l 1024x417
meta-width: p 400x561 - l 683x278

Opera:
meta-none: p 850x1242 - l 1024x453
meta-width: p 400x591 - l 683x334

Playbook:
(I'm going to retest this because the values came from someone that tested for me pre-release... I have one now.)

HANDHELD:

Droid2 (not sure what Android version - I'll have to find/charge to see since results are slightly different with meta-none than above):
Stock Browser:
meta-none: p 800x1221 - l 800x404
meta-width: p 320x488 - l 569x239

Nexus One (again, have to check Android version later):
Stock browser:
meta-none: p 800x1130 - l 800x358
meta-width: p 320x452 - l 533x239

Blackberry Torch (ditto on system):
Stock Browser:
meta-none: p 360x403 - l 360x283
meta-width: p 360x403 - l 360x213

iPhone 3G (iOS 4 - fairly certain):
Stock browser:
meta-none: p 980x1091 - l 980x425
meta-width: p 320x356 - l 320x139

Windows Phone (no clue on system - I don't own this one):
meta-none: p 800x1151 - l 960x357
meta-width: p 320x646 - l 480x290 (I don't trust these results — if we can get someone to retest, I'd feel better since I may be missing a value)


Please note by these results that they are all from a year ago. So newer tests may slightly differ.

What are the chances of that? :-) A bunch of screen data which hopefully correlates: http://tripleodeon.com/wp-content/uploads/2011/12/table.html & a write-up http://tripleodeon.com/2011/12/first-understand-your-screen

Yea, I just showed that to @jonathantneal a couple hours ago. Too funny! (Just have been too tired to compare the data from both. Maybe tomorrow.)

Heh. Yea, Jonathan & I talked about that earlier... I think with all the data we've collected (with more to come), it's more digestible in spreadsheet form. Wat do you think @jonathanneal? (Well, you can answer when you wake up. ;))

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" <
reply@reply.github.com>
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 <
reply@reply.github.com

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
reply@reply.github.com
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?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.