This document summarizes various features and APIs available for mobile web development. It discusses viewport meta tags, touch events, gesture events, media queries, and device features like the device pixel ratio and connection type. It also lists some popular mobile JavaScript libraries. The document provides code examples for touch, gesture, and device motion events.
18. Media Capture
• Opens straight to the camera or
microphone for file input
<input type="file" accept="image/*;capture=camera"/>
3.0
19. Media Capture
• Opens straight to the camera or
microphone for file input
<input type="file" accept="image/*;capture=camera"/>
<input type="file" accept="video/*;capture=camcorder"/>
3.0
20. Media Capture
• Opens straight to the camera or
microphone for file input
<input type="file" accept="image/*;capture=camera"/>
<input type="file" accept="video/*;capture=camcorder"/>
<input type="file" accept="audio/*;capture=microphone"/>
3.0
24. Media Queries
• based on screen size and device size
• based on orientation
• based on screen resolution
• etc...
25. Media Queries
@media all and (max-width: 480px) {
body { }
}
@media all and (max-device-width: 480px) { }
@media all and (orientation: portrait) { }
34. orientationchange
// fired every 90 degrees of rotation
window.addEventListener('orientationchange',
function(e){
//window.orientation (0 is portrait, 90 and
-90 are landscape)
}, false);
35. deviceorientation
• taps into the gyroscope
• not just every 90 degrees
3.0 4.2
http://frontendstuff.com/javascript/examples/deviceorientation.html
36. deviceorientation
// fired a LOT
window.addEventListener('deviceorientation', function(e){
//e.alpha;
//e.beta;
//e.gamma;
}, false);