Useful Mobile Development Resources
#####################################################################
# Example Snippets File for Mobile Web Development Fundamentals
#####################################################################
------------------------------------------------
Mobile Web Development Resources:
------------------------------------------------
Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/
Quirksmode Site: http://www.quirksmode.org/mobile/
User Agent Strings: http://www.useragentstring.com/
HTML5 and Related Web Applications:
HTML5 http://www.w3.org/TR/html5/
Geolocation API: http://dev.w3.org/geo/api/spec-source.html
Local Storage API: http://dev.w3.org/html5/webstorage/
Offline Application Cache: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
Vendor-Provided Resources:
Apple:
Getting Started with iOS Web Apps: http://developer.apple.com/library/safari/#referencelibrary/GettingStarted/GS_iPhoneWebApp/_index.html#//apple_ref/doc/uid/TP40008134
Google:
Web Applications Overview: http://developer.android.com/guide/webapps/index.html
Targeting Screens from Web Apps: http://developer.android.com/guide/webapps/targeting.html
Microsoft:
IE Developer Guide: http://msdn.microsoft.com/en-us/ie/ff468705.aspx
Designing Web Sites for Phone Browsers (PDF): http://go.microsoft.com/?linkid=9713253
Mozilla:
Fennec (Mobile Firefox) Home Page: https://wiki.mozilla.org/Mobile/Fennec
Opera:
Opera Mobile Home: http://dev.opera.com/articles/mobile/
Opera Mobile 10 Intro: http://dev.opera.com/articles/view/opera-mobile-10-developers-introduction/
------------------------------------------------
Viewport
------------------------------------------------
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width=device-width" />
------------------------------------------------
Mobile Development on Desktop
------------------------------------------------
User Agent Tools
Firefox
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/
Chrome
https://chrome.google.com/webstore/detail/aafciojnlamllgpkpdkbamkfgbofhgcj
User Agent Strings:
IE Mobile User Agent
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; <make>; <model>)
iOS User Agent
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7
Mozilla/5.0 (iPod; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7
Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10
Opera Mobile User Agent
Opera/9.80 (S60; SymbOS; Opera Mobi/498; U; en-GB) Presto/2.4.18 Version/10.00
Android Chrome Mobile User Agent
Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; HTC_DesireS_S510e Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla Fennec User Agent
Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.2.13) Gecko/20101203 Mozilla/5.O(Android;Linux armv7l;rv:2.1) Gecko/20110318 Firefox/4.0b13pre Fennec/4.0 ( .NET CLR 3.5.30729)
Mozilla/5.0 (Maemo; Linux armv7l; rv:2.1) Gecko/20110318 Firefox/4.0b13pre Fennec/4.0
Mozilla/5.0 (Android; Linux armv7l; rv:2.0) Gecko/20110103 Firefox/4.0 Fennec/4.0
BlackBerry User Agent
Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.201 Mobile Safari/534.1+
Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+ (KHTML, like Gecko)
------------------------------------------------
Mobile Forms
------------------------------------------------
@media screen and (max-width:480px)
{
label
{
width: auto;
text-align: left;
display: block;
}
}
<p><label>Numeric Input Field:</label><input name="Num1" type="number" min="0" max="20" step="1" /></p>
<p><label>Email Input Field:</label><input name="Email1" type="email" /></p>
<p><label>URL Input Field:</label><input name="URL1" type="url" required /></p>
<p><label>Tel Input Field:</label><input name="tel1" type="tel" /></p>
------------------------------------------------
Media Queries
------------------------------------------------
CSS:
@media screen and (min-width: 801px) {
}
/* -------------------- */
@media screen and (max-width:800px) {
#masthead {
font-size:24pt;
font-family:"Times New Roman", Times, serif;
background-color:olive;
color: white;
text-align:right;
}
#container {
font-size: 16pt;
position:inherit;
width: 100%;
}
#left_col {
display:block;
width:100%;
}
#left_col ul {
margin-left:0pt;
padding: 0;
}
#left_col li {
display:inline;
margin-right:5pt;
list-style-type:none;
}
#page_content {
display:block;
}
#footer {
border: 1px black solid;
padding: 5pt;
}
}
------------------------------------------------
Feature Detection
------------------------------------------------
<script src="../modernizr-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
function testFeatures() {
// Test for JavaScript Features
document.querySelector("#geoloc").innerHTML = Modernizr.geolocation ? "supported" : "not supported";
document.querySelector("#touch").innerHTML = Modernizr.touch ? "supported" : "not supported";
// Test for HTML5 Features
document.querySelector("#svg").innerHTML = Modernizr.svg ? "supported" : "not supported";
document.querySelector("#canvas").innerHTML = Modernizr.canvas ? "supported" : "not supported";
}
window.onload = testFeatures;
</script>
<style type="text/css">
.animtest, .noanimtest
{
display: none;
}
.cssanimations .animtest {
display:block;
}
.no-cssanimations .noanimtest
{
display:block;
}
</style>
------------------------------------------------
GeoLocation
------------------------------------------------
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
}
function geoSuccess(positionInfo) {
document.getElementById("longitude").innerHTML = positionInfo.coords.longitude;
document.getElementById("latitude").innerHTML = positionInfo.coords.latitude;
document.getElementById("accuracy").innerHTML = positionInfo.coords.accuracy;
document.getElementById("altitude").innerHTML = positionInfo.coords.altitude;
document.getElementById("altitudeAccuracy").innerHTML = positionInfo.coords.altitudeAccuracy;
document.getElementById("heading").innerHTML = positionInfo.coords.heading;
document.getElementById("speed").innerHTML = positionInfo.coords.speed;
}
function geoError(positionError) {
if (errorInfo.code == 1)
alert("The user denied permission access");
else if (errorInfo.code == 2)
alert("Unable to locate you!");
else if (errorInfo.code == 3)
alert("Timed out getting location");
}
------------------------------------------------
LocalStorage
------------------------------------------------
initialize
// Test to see if we support the Storage API
var bSupportsLocal = (('localStorage' in window) && window['localStorage'] !== null);
// if localStorage is not supported, then bail on the demo
if (!bSupportsLocal) {
document.getElementById('infoform').innerHTML = "<p>Sorry, this browser does not support the W3C Storage API.</p>";
return;
}
// if the localStorage object has some content, restore it
if (window.localStorage.length != 0) {
document.getElementById('firstName').value = window.localStorage.getItem('firstName');
document.getElementById('lastName').value = window.localStorage.getItem('lastName');
document.getElementById('postCode').value = window.localStorage.getItem('postCode');
}
Storage
function storeLocalContent(fName, lName, pCode) {
window.localStorage.setItem('firstName', fName);
window.localStorage.setItem('lastName', lName);
window.localStorage.setItem('postCode', pCode);
}
function clearLocalContent(strToStore) {
window.localStorage.clear();
}
------------------------------------------------
Server-Side Detection Resources
------------------------------------------------
http://wurfl.sourceforge.net/
http://detectmobilebrowsers.mobi/
------------------------------------------------
Server-Side Detection PHP
------------------------------------------------
if (stripos($user_agent,'ipod') !== false || stripos($user_agent,'iphone') !== false)
return true;
if (stripos($user_agent,'android') !== false)
return true;
if (stripos($user_agent,'opera mobi') !== false)
return true;
if (stripos($user_agent,'windows phone os') !== false && stripos($user_agent,'iemobile') !== false)
return true;
if (stripos($user_agent,'fennec') !== false)
return true;
------------------------------------------------
Server-Side Detection ASP.NET
------------------------------------------------
Page-Based Detection
string sUA = Request.UserAgent.Trim().ToLower();
uaString.InnerText = Request.UserAgent;
if (sUA.Contains("ipod") || sUA.Contains("iphone"))
isMobile = true;
if (sUA.Contains("android"))
isMobile = true;
if (sUA.Contains("opera mobi"))
isMobile = true;
if (sUA.Contains("windows phone os") && sUA.Contains("iemobile"))
isMobile = true;
if (sUA.Contains("fennec"))
isMobile = true;
------------------------------------------------
Mobile Performance Measuring
------------------------------------------------
function calcPerfNumbers() {
if (!!window.performance) {
// navigation time is loadEventEnd - navigationStart
var timingData = window.performance.timing;
document.querySelector("#loadtime").innerHTML = (timingData.loadEventEnd - timingData.navigationStart);
document.querySelector("#onloadtime").innerHTML = (timingData.loadEventEnd - timingData.loadEventStart);
document.querySelector("#domcomplete").innerHTML = (timingData.domComplete - timingData.navigationStart);
document.querySelector("#requeststart").innerHTML = (timingData.requestStart - timingData.navigationStart);
}
else {
document.querySelector("#perfdata").innerHTML = "<p>Sorry, this browser does not support the <code>performance</code> object</p>";
}
}
function init() {
setTimeout(calcPerfNumbers, 500);
}
window.onload = init;
------------------------------------------------
Creating Full-Screen Web Apps
------------------------------------------------
<meta content="width=device-width, user-scalable=no, initial-scale=1.0" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/myappicon.png"/>
<link rel="apple-touch-startup-image" href="images/startup.png"/>
------------------------------------------------
Customizing the User Interface
------------------------------------------------
<style type="text/css">
#customHold {
-webkit-touch-callout: none;
}
#customTap {
-webkit-tap-highlight-color: #f00;
}
h1 {
-webkit-user-select: none;
}
</style>
------------------------------------------------
Miscellaneous Browser Capabilities
------------------------------------------------
Simple Orientation
onorientationchange="updateOrientation();" onload="updateOrientation();"
var displayStr = "Orientation : ";
switch (window.orientation) {
case 0:
displayStr += "Portrait (0 deg)";
break;
case -90:
displayStr += "Landscape (-90 deg clockwise)";
break;
case 90:
displayStr += "Landscape (90 deg counterclockwise)";
break;
case 180:
displayStr += "Portrait (180 upside-down)";
break;
}
document.querySelector("#output").innerHTML = displayStr;
Complex Motion
var time=0;
function handleMotion(e) {
time += e.interval;
if (time <= 1.5)
return;
time=0;
var displayStr = "Acceleration: ";
displayStr += "<p>x: " + e.acceleration.x + "</p>";
displayStr += "<p>y: " + e.acceleration.y + "</p>";
displayStr += "<p>z: " + e.acceleration.z + "</p>";
displayStr += "Rotation Rate: ";
displayStr += "<p>alpha: " + e.rotationRate.alpha + "</p>";
displayStr += "<p>beta: " + e.rotationRate.beta + "</p>";
displayStr += "<p>gamma: " + e.rotationRate.gamma + "</p>";
document.querySelector("#output").innerHTML = displayStr;
}
window.addEventListener("devicemotion", handleMotion);
Using Touch Events
function handleSwipe(elem, func) {
var swipeDir;
var startX, startY;
var deltaX;
var yThreshhold = 30;
var xThreshhold = 50;
function trackTouchMove(e) {
if (e.changedTouches.length != 1) {
stopTouch();
}
else {
deltaX = e.touches[0].pageX - startX;
var deltaY = e.touches[0].pageY - startY;
if (swipeDir == null) {
swipeDir = deltaX;
e.preventDefault();
}
else if (Math.abs(deltaY ) > yThreshhold) {
stopTouch();
}
e.preventDefault();
}
}
function handleTouchEnd(e) {
stopTouch();
if (Math.abs(deltaX) > xThreshhold) {
func(elem, deltaX > 0 ? 'right' : 'left' );
}
}
function handleTouchStart(e) {
document.querySelector("#output").innerHTML = "";
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
elem.addEventListener('touchmove', trackTouchMove, false);
elem.addEventListener('touchend', handleTouchEnd, false);
e.preventDefault();
}
}
function stopTouch() {
elem.removeEventListener('touchmove', trackTouchMove);
elem.removeEventListener('touchend', handleTouchEnd);
}
elem.addEventListener("touchstart", handleTouchStart, false);
}
function swipe(elem, direction) {
document.querySelector("#output").innerHTML = "You swiped: " + direction + " on element: " + elem.tagName;
}
window.onload = function() {
handleSwipe(document.body, swipe);
}
**********END*****
Do share if you like the above
Happy Coding !!
Comments
Post a Comment