Touch screens
A few years ago touch screens were typically associated with phones, and thus small hand held devices. However, they have now become universal even at the bottom end of the price range for laptops and monitors.
This expansion of touch screens is mainly due to Windows 8 - most consumer laptops and desktops come with it installed and, whilst it can be a bit awkward to use at times, it is significantly improved when coupled with a touch screen. The conspicuous gap in the market is now Apple's OS X devices, if that's all you use then you're losing touch (no pun intended) with where the consumer market is heading.
This is a collection of devices with touch screens that are all capable of browsing the web. None of these are more than 18 months old and, the watch aside, you could reasonably expect to find them - or at least something similar - in the analytics of any reasonably sized consumer website.
Device | Viewport physical size (mm)1 | Viewport size (pixels)2 |
---|---|---|
LG G Watch | 30x30 | 187x187 |
BlackBerry 9900 | 58x39 | 356x206 |
iPhone 5S | 55x82 | 320x460 |
Galaxy Note 2 | 70x119 | 360x615 |
Kindle Paperwhite | 90x102 | 758x897 |
Nexus 7 | 94x140 | 600x887 |
Dell XPS13 laptop | 290x160 | 1904x1079 |
1080p Monitor | 509x280 | 1904x1079 |
Looking at the physical and pixel browser viewport sizes it's just not possible to make any meaningful generalisations. Combine that with the other input methods across these devices - keyboard, mouse, touchpad, hardware buttons, trackball, voice, Bluetooth remote &c. then the only safe thing we can do is assume that every screen has the possibility of being a touch screen.
Even if you don't have or want touch screens on all your devices they are now becoming ubiquitous in the consumer space: if your users are using them then you need to understand how they work as an interface and the only meaningful way to do that is to actually use them.
Footnotes
- As measured by me with a tape measure. This is the physical size of the browser viewport when taking up as much of the screen as possible - e.g. full screen mode, scrolled to hide browser chrome &c.^
- As reported by jQuery's
$(window).width()
and$(window).height()
when taking up as much of the screen as possible.^