Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Created November 30, 2011 20:59
Show Gist options
  • Save jonathantneal/1410787 to your computer and use it in GitHub Desktop.
Save jonathantneal/1410787 to your computer and use it in GitHub Desktop.
innerWidth / innerHeight tests @ http://sandbox.thewikies.com/orientation/
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
@cubiq
Copy link

cubiq commented Dec 5, 2011

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