Mobile HTML, CSS, and JavaScript
- 1. Mobile HTML, CSS, JavaScript David Calhoun
- 3. Viewport Meta Tag :( :)
- 4. Viewport Meta Tag <meta name="viewport" content="width=device-width"/>
- 5. URI Schemes href="sms:18005555555" href="tel:18005555555"
- 6. Home Screen Icon Android too!
- 7. Home Screen Icon <link rel="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 <meta name="apple-mobile-web- app-status-bar-style" content="black"/>
- 16. Media Capture 3.0
- 17. Media Capture • Opens straight 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 of Autocorrect
- 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) { }
- 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. JavaScript
- 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 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);
- 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
- 40. window.devicePixelRatio • 1.5 (Nexus One, 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
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n