Mobile - Table of contents

This section contains my official mobile pages. They treat various aspects of mobile web development.

My mobile test directory contains many more tests and draft pages, but once a draft is officially released it ends up here.

General
Browsers A list of smartphone browsers. Probably not complete.
Mobile market overview An overview table of the mobile market.
WebKit comparison A comparison of about 20 WebKit-based browsers. Its main purpose is to prove there is no “WebKit on mobile.”
Mobile blog posts Blog posts about various mobile topics.
Touch events
Touch action compatibility table What happens when the user touches a screen of a touchscreen? Concentrates on the events.
Touch advisory paper My advice to browser vendors on properly implementing the touch actions, especially events.
The two viewports
A tale of two viewports — 1 In order to understand the viewport issue it’s best to start with desktop browsers and learn how everything works there.
A tale of two viewports — 2 Once you’ve understood the desktop browsers you can continue with the more complicated state of affairs on mobile browsers.
Viewport compatibility table How to read out various interesting widths and heights. Media queries and meta viewport. Mouse coordinates.

Compatibility

My most important conclusions.

Property Opera Mobile iPhone Android Dolfin Symbian Iris Firefox MicroB IE Mobile BlackBerry NetFront Obigo
Presto WebKit Gecko
Touch events
 No Yes No No No

Touchstart, touchmove, touchend.
Other events

when you perform a touch action

 Incomplete Incomplete Almost Incomplete Almost Incomplete Almost Almost Minimal To be tested

Interface and legacy events. The latter are generally well supported, the former aren’t.
Visual viewport size
 No Yes No Yes No No Yes No

The size in CSS pixels of the visual viewport is by far the most important bit of data in the viewport properties. It’s found in window.innerWidth/Height, though IE uses document.documentElement.offsetWidth/Height.
Other viewport properties
 Incomplete Almost Yes Minimal Yes Incomplete Incomplete Yes Almost Incomplete Minimal Incomplete

Screen size, layout viewport size, HTML element size, and viewport offset. Four points to be assigned:

  1. 4 points: Yes
  2. 3 points: Almost
  3. 2 points: Incomplete
  4. 1 points: Minimal
IE
IE gives you most information, but in other properties than the other browsers.
Media queries
 Yes Yes Yes No 
@media all and (max-width: 400px) {
	// styles assigned when width is smaller than 400px;
}

A Yes here means that the browser gets its dimension information from the correct JavaScript properties. Unfortunately those properties may contain false information.
Meta viewport
 Almost Almost Yes Almost No Yes No Yes Almost No Yes 
<meta name="viewport" content="width = 380">
<meta name="viewport" content="width = device-width">
Almost
Browser does not allow user to zoom out beyond specified page width
  • Opera Mobile 10.10 does not allow any zooming in pages with a <meta viewport>.
Property Opera Mobile iPhone Android Dolfin Symbian Iris Firefox MicroB IE Mobile BlackBerry NetFront Obigo
Presto WebKit Gecko