A must see A to Z mobile web primer. If you still only have one website built for desktop then you need to review this presentation. Examples are about mapping but the concepts apply to everyone!
32. Setting the mobile view port
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>
33. Setting the mobile view port
Minimum view port
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>
Zoom level on page load
Force map to scale - not the page
37. CSS3 Media Queries
Target specific devices by screen width
@media screen and (min-device-width:768px) and (max-device-width:1024px) {
/* styles go here */
}
Apply styles by device orientation
@media (orientation: landscape) {
/* styles go here */
}
Target high density screens such as iPhone 4
@media (-webkit-min-device-pixel-ratio: 2) {
/* high resolution device styles go here */
}
38. Listen for device rotation
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent =
supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent,
dojo.hitch(this,function(){
//... TODO
this.orientationChanged = orientationChanged;
}), false
);
51. HTML5
HTML + CSS3 + JavaScript
HTML5 Logo by W3C
52. HTML5 APIs
• Several new APIs
- Drag and drop API
- FileSystem API(s)
- Geolocation API
- Web Storage: localStorage/sessionStorage
- Web Workers (threaded JavaScript!)
- Cross-Origin Resource Sharing (CORS)
- Browser History
53. Web Storage API
• 5 MB limit vs. 4 KB per regular cookie
• Stores key/value pairs
• localStorage and sessionStorage
// Put the object into storage
localStorage.setItem(“address”, someAddress);
// Retrieve the object from storage
var userAddress = localStorage.getItem(“address”);
// Save data to a the current session's store
sessionStorage.setItem("username", "John");
// Access some stored data
var userName = sessionStorage.getItem("username"));
