Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
innerWidth / innerHeight tests @ http://sandbox.thewikies.com/orientation/
innerWidth / innerHeight tests @ http://sandbox.thewikies.com/orientation/
--------------------------------------------------------------------------------
Tested (10 devices, 21 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 2 (WebOS 2.1) (Webkit, Opera Mobile)
Galaxy 10.1 Android 3.2 (Webkit, Dolphin, Opera Mini)
iPad 1 iOS5 (Safari, Opera Mini)
iPad 2 iOS5
================================================================================
"p" is used to describe the result when the device is portrait oriented (taller)
"l" is used to describe the result when the device is landscape oriented (wider)
"p,l" is used to describe the result when the device is portrait oriented and then rotated to landscape.
"l,p" is used to describe the result when the device is 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 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 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 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 does not reflow the layout on orientation change, so these numbers are not changed.
--------------------------------------------------------------------------------
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 1280x648 - l 800x1128
meta-width-initial: p 1280x648 - l 980x496
meta-width-initial-maximum: p 800x1128 - l 1280x648
Dolphin:
meta-none: p 980x1389 - l 980x506
meta-width: p 1280x661 - l 800x1141
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 753x415 - l 472x698
meta-width-initial: p 471x698 - l 753x415
meta-width-initial-maximum: p 471x698 - l 753x415
* note: opera 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 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: the results are identical to the iPad 1.
================================================================================
results collected by @stefsull, @drublic, @pascalvos, @alex_gibson, @tchalvak, and @jon_neal
@Wilto

ungh yes data

Awesome work, guys!

@alexgibson

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

@tchalvak

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

@alexgibson

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

@necolas

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.

@jonathantneal

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

@stefsullrew

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.)

@jonathantneal

Thanks @stefsullrew, your results have been updated.

@stefsullrew

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.)

@jonathantneal

Thanks @stefsullrew, that's awesome. Added.

@stefsullrew

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

@jonathantneal

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

@stefsullrew

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.)

@jonathantneal

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.

@kurtcoda

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)

@stefsullrew

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.

@jamesgpearce

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

@stefsullrew

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.)

@stefsullrew

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. ;))

@alexgibson

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!

@quimcalpe

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

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?

@tchalvak
@cubiq
@tchalvak
@cubiq
@jonathantneal

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

@jonathantneal

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

@jamesgpearce

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

@cubiq

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

@stefsullrew

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).

@stefsullrew

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

@kurtcoda

@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

@cubiq

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.