Downloaded 669 times
More Related Content
Mobile HTML, CSS, and JavaScript
- 1. Mobile HTML, CSS, JavaScript David Calhoun
- 3. Viewport Meta Tag :( :)
- 4. Viewport Meta Tag <metaname="viewport" content="width=device-width"/>
- 5. URI Schemes href="sms:18005555555" href="tel:18005555555"
- 6. Home Screen Icon Android too!
- 7. Home Screen Icon <linkrel="apple-touch-icon" href="icon.png"/>
- 8. Full Screen Flag(iOS) vs
- 9. Full Screen Flag(iOS) <meta name="apple-mobile-web- app-capable" content="yes"/>
- 10. Splash Screen (iOS) <link rel="apple-touch- startup-image" href="startup.png"/>
- 11. Status Bar Style Default Black
- 12. Status Bar Style <metaname="apple-mobile-web- app-status-bar-style" content="black"/>
- 13.
- 14.
- 15.
- 16. Media Capture 3.0
- 17. Media Capture • Opensstraight to the camera or microphone for file input 3.0
- 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
- 21. The Joys ofAutocorrect
- 22.
- 24. Media Queries • basedon 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) { }
- 26. tap-highlight-color .no-highlight { -webkit-tap-highlight-color: transparent; } .red-highlight { -webkit-tap-highlight-color: red; }
- 27. user-select .no-user-select { -webkit-user-select: none; -moz-user-select: none; user-select: none; } ?
- 28. touch-callout .no-callout { -webkit-touch-callout: none; } Default behavior
- 29.
- 30. Touch Events • touchstart • touchmove • touchend • (touchcancel)
- 31. Touch Events document.addEventListener('touchstart', function(e){ //e.touches //e.changedTouches }, false); http://frontendstuff.com/javascript/examples/touch.html
- 32. Gesture Events (iOS) • iOS only • 2+ fingers • gesturestart • gesturechange • gestureend
- 33. Gesture Events (iOS) document.addEventListener('gesturestart', function(e){ //e.scale //e.rotation }, false); http://frontendstuff.com/javascript/examples/gesture.html
- 34. orientationchange // fired every90 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 aLOT window.addEventListener('deviceorientation', function(e){ //e.alpha; //e.beta; //e.gamma; }, false);
- 37. devicemotion • taps into accelerometer • practical application: shake gesture? 3.0 4.2 http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/ DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html
- 38. devicemotion window.addEventListener('devicemotion', function(e){ // e.accelerationIncludingGravity.x // e.accelerationIncludingGravity.y // e.accelerationIncludingGravity.z }, false); http://frontendstuff.com/javascript/examples/devicemotion.html
- 39.
- 40. window.devicePixelRatio • 1.5 (NexusOne, etc.) • 2 (iPhone 4, etc.)
- 41. navigator.connection (Android) { "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" } 2.2
- 42. navigator.connection (Android) navigator.connection.CELL_3G navigator.connection.CELL_2G navigator.connection.WIFI
- 43. Mobile JavaScript Libraries and much more... http://davidbcalhoun.com/2010/mobile-javascript-libraries-and-frameworks
- 44. Photo Credits • http://www.flickr.com/photos/kk/106960641/ • http://www.flickr.com/photos/geirarne/110995239/ • http://www.flickr.com/photos/aldrin_muya/3133715902/ • http://crockfordfacts.com/ • http://www.flickr.com/photos/equanimity/535648833/ • http://www.flickr.com/photos/71518947@N00/4698968858/
- 45. That’s All Folks! •Twitter: @franksvalli • SpeakerRate: http://bit.ly/hMEEfo