In this chapter, we're going to take a quick look at CSS3 3D transformations and introduce some more HTML5 APIs that are specific to mobile devices. With the knowledge gained from the previous chapters, we'll develop four small apps that will make use of the things that we've already learned:
DeviceOrientation
events and rotate the entire scene in 3D as you rotate your device.dart:js
library.Although some of the APIs covered in this chapter are mobile-specific, you can emulate them in Chrome or Dartium.
By default, mobile browsers add artificial 300 ms delay between the time you release your finger (onTouchEnd
) and before a click event is triggered. This is a nice accessibility feature for normal web pages that aren't optimized for mobile browsers, but for web apps that are designed to look and feel native, this is unwanted behavior.
There used to be some nasty workarounds, but browser vendors decided to remove this delay for mobile-friendly (or mobile-optimized) websites. This means that pages that use this header aren't affected by tap delay:
<meta name="viewport" content="width=device-width">
This meta
variable tells the browser to set its width to the device width with respect to the pixel density. For example, for iPhone 6 with 1334 x 750 screen resolution, and pixel density 2, the page will be rendered in a browser window with a 667 x 375 resolution. Now as a side effect, it also turns off the tap delay.
We recommend that you use this header for all examples in this chapter unless you know for sure that you don't want it.
18.225.235.144