Mobile HTML, CSS, and JavaScript

MobileHTML, CSS, JavaScript David Calhoun

Viewport Meta Tag :( :)

Viewport Meta Tag<meta name="viewport"content="width=device-width"/>

URI Schemeshref="sms:18005555555" href="tel:18005555555"

Home Screen Icon Android too!

Home Screen Icon<link rel="apple-touch-icon"href="icon.png"/>

Full Screen Flag (iOS) vs

Full Screen Flag (iOS)<meta name="apple-mobile-web-app-capable" content="yes"/>

Splash Screen (iOS) <link rel="apple-touch- startup-image" href="startup.png"/>

Status Bar StyleDefault Black

Status Bar Style<meta name="apple-mobile-web-app-status-bar-style"content="black"/>

Media Capture 3.0

Media Capture• Opens straight to the camera or microphone for ﬁle input 3.0

Media Capture • Opens straight to the camera or microphone for ﬁle input<input type="file" accept="image/*;capture=camera"/> 3.0

Media Capture • Opens straight to the camera or microphone for ﬁle input<input type="file" accept="image/*;capture=camera"/><input type="file" accept="video/*;capture=camcorder"/> 3.0

Media Capture • Opens straight to the camera or microphone for ﬁle input<input type="file" accept="image/*;capture=camera"/><input type="file" accept="video/*;capture=camcorder"/><input type="file" accept="audio/*;capture=microphone"/> 3.0

The Joys of Autocorrect

Controlling autocorrect<input autocorrect="off"autocomplete="off"autocapitalize="off"/>

Media Queries• based on screen size and device size• based on orientation• based on screen resolution• etc...

Media Queries@media all and (max-width: 480px) { body { }}@media all and (max-device-width: 480px) { }@media all and (orientation: portrait) { }

tap-highlight-color .no-highlight { -webkit-tap-highlight-color: transparent; } .red-highlight { -webkit-tap-highlight-color: red; }

user-select .no-user-select { -webkit-user-select: none; -moz-user-select: none; user-select: none; } ?

touch-callout .no-callout { -webkit-touch-callout: none; }Default behavior

JavaScript

Touch Events • touchstart • touchmove • touchend • (touchcancel)

Touch Eventsdocument.addEventListener(touchstart,function(e){ //e.touches //e.changedTouches}, false);http://frontendstuff.com/javascript/examples/touch.html

Gesture Events (iOS) • iOS only • 2+ ﬁngers • gesturestart • gesturechange • gestureend

Gesture Events (iOS) document.addEventListener(gesturestart, function(e){ //e.scale //e.rotation }, false);http://frontendstuff.com/javascript/examples/gesture.html

orientationchange// fired every 90 degrees of rotationwindow.addEventListener(orientationchange,function(e){ //window.orientation (0 is portrait, 90 and-90 are landscape)}, false);

deviceorientation • taps into the gyroscope • not just every 90 degrees 3.0 4.2http://frontendstuff.com/javascript/examples/deviceorientation.html

deviceorientation// fired a LOTwindow.addEventListener(deviceorientation, function(e){ //e.alpha; //e.beta; //e.gamma;}, false);

devicemotion • taps into accelerometer • practical application: shake gesture? 3.0 4.2http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/ DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

devicemotion window.addEventListener(devicemotion, function (e){ // e.accelerationIncludingGravity.x // e.accelerationIncludingGravity.y // e.accelerationIncludingGravity.z }, false);http://frontendstuff.com/javascript/examples/devicemotion.html

window.devicePixelRatio

window.devicePixelRatio• 1.5 (Nexus One, etc.)• 2 (iPhone 4, etc.)

navigator.connection (Android) { "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" } 2.2

navigator.connection (Android)navigator.connection.CELL_3Gnavigator.connection.CELL_2Gnavigator.connection.WIFI

Mobile JavaScript Libraries and much more... http://davidbcalhoun.com/2010/mobile-javascript-libraries-and-frameworks

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/

That’s All Folks!• Twitter: @franksvalli• SpeakerRate: http://bit.ly/hMEEfo

http://davidbcalhoun.com	66495
http://translate.googleusercontent.com	242
url_unknown	135
http://westhigh.eu5.org	126
http://localhost	86
http://www.strawberrytags.com	59
http://webcache.googleusercontent.com	36
http://www.joaosantacruz.com	33
http://17mobile.zzl.org	22
http://joaosantacruz.com	16
http://www.twylah.com	6
http://www.slideshare.net	6
http://localhost:57206	6
http://twitter.com	3
http://a0.twimg.com	2
http://paper.li	2
http://us-w1.rockmelt.com	2
http://translate.google.com	1
http://www.fitness-shop.dev	1
http://mos	1
http://www.excite-webtl.jp	1
http://shuffle.local:8888	1
http://207.46.192.232	1
http://www.bastic.net	1
http://blrkec63122l	1

Mobile HTML, CSS, and JavaScript

by franksvalli on Mar 28, 2011

Accessibility

Tags

Upload Details

Usage Rights

25 Embeds 67,285

Statistics

Mobile HTML, CSS, and JavaScript — Presentation Transcript