Karel,

To recap everything done so far:

• window.orientation mostly works. Mobile Firefox on Android does not support window.orientation at the moment. Also this not guaranteed to be present only on mobile and tablet browsers, so in my opinion this is probably not a good test going forward and it would be difficult to explain why this should be chosen over other tests.
• Modernizr.deviceOrientation based on this test is not a suitable test for mobile device detection - it returns true on both desktop and mobile variants of Chrome and Firefox. I therefore doubt if orientation-only checks are a good idea, since desktop browsers support device orientation events .
• The current Modernizr.touch test or even an improved one is probably not suitable in the long term. Going by this issue, detecting touch support is not sufficient. Devices like Surface can be equipped with both touchscreen support as well as the traditional keyboard-mouse combo. Additionally, this is dependent on the OS reporting the presence of a touch device, and not whether the touch device is being used for input in the browser.

We could fall back to an improved version of the viewport size detection test. I evaluated the following:

• In order to compute viewport dimensions correctly, we could rely on window.devicePixelRatio, but the semantics of this property are not standardized yet in all scenarios. Typically, window.devicePixelRatio is 1 on desktops; it is 2 on retina devices and could have various values (like 1.5) for devices that can squeeze extra hardware pixels to fit a certain number of CSS pixels. But there is a catch - some browsers will increase this value on zoom even though the same number of hardware pixels are used to display the viewport before and after the zoom. Also the Macbook Retina displays have a devicePixelRatio of 2, so a simple (devicePixelRatio > 1) test is not sufficient.
• We could detect the orientation of the device and compare whether the size of the viewport in such an orientation is within a pre-determined viewport size like mobile portrait, mobile landscape, tablet portrait, tablet landscape etc. This is my preferred test but only until we switch to a responsive site (see later). The primary reason to retain/enhance the existing detection code is to retain it's simplicity in some form, while ensuring that the test is as accurate as possible. We already notify mobile browsers that they should scale viewport when displaying the page instead of attempting to display a desktop site : <meta name="viewport" content="width=device-width, initial-scale=1">.

For now, I've decided to refine this test as:

if (Modernizr.mq("only all and (max-width: 800px ) and (orientation: portrait)") ||
    Modernizr.mq("only all and (max-width: 1280px ) and (orientation: landscape)")) {
    // execute some mobile or tablet specific logic
}

I've referred http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/ for the choice of the viewport sizes in portrait and landscape modes. Note that this is browser viewport sizes and not device resolution.

Finally, since this quickstart does not use any mobile or tablet specific features, it therefore important to resize the widgets on the screen and/or display them in a different sequence based on the dimensions of the viewport. Devices with smaller viewports should therefore display larger widgets than their counterparts with larger viewports. It would therefore make sense to demonstrate responsive design here, instead of attempting to perform device detection; we should instead be performing feature detection (which we don't seem to require).