Skip to main content

Useful Mobile Development Resources


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 !!


Labels:

Comments

Post a Comment

Popular posts from this blog

Dynamically generate Text Box and update its value in database

Hi Guys, This Post is in reference to the time I spent in order to write just a piece of code in PHP, though it would be very easy for most of the guys but if you are still learning then its a good thing to be proud of. Ok let me explain a little about what I was trying to do and how I did it. Requirement : I need to list down all the names of guys who falls under a certain category and display them on another page. I can do this by creating static text box in the landing page and fetch the value from the database OR I can dynamically generate the text box and display all the data there. For that first call the sql query of the condition like this. $sql = mysql_query("SELECT * FROM `list1` WHERE BLAH BLAH"); Now use the While query in order to get all the data required  <?php       while ($row = mysql_fetch_array($sql))       {           ?>       <tr>       <td  align="center" valign="middle" scope="row">
Post a Comment
Read more

Jquery Carousels

Jquery Carousels we all love carousels they are a fantastic way to give the effects we want our visitors to have, more than that we have multiple components to show like images, links, text etc. There are lot many ways to achieve it, Jquery is ofcourse the best possible option available outside. We all search for lot of ems it can be Jquery Flexslider  or Jcarousel Lite  whatever you choose, customization is required, in this tutorial I am not going to focus on how to install these libraries rather one step ahead, to let you know how these carousels can be called multiple times in the same page having their controls working respectively for each carousel instance. So, lets get started with the HTML <div id="sideRight"> <div id="first">       <!-- Do not change the class and tag type, as this will remain as it is for all the following divisions-->       <p class="containheader">Plans for you <a href=&quo
Post a Comment
Read more

IE 10 in IE7 compatibility mode returns error: 'SCRIPT3: Member not found'

Lately I upgraded my Internet Explorer to newer version which is 10, and was quite happy about it, but that doesn't seem to last long, when I tested my site changing the browser mode IE7, specifically using IE10, then jquery have thrown an error saying "member not found" , I was not surprised as such issues I have seen before as well, and was sure that there was JS code messed up from my side, after scanning through all the methods etc. I was not able to figure out anything, even was not sure what to search on Internet. After introspecting it was clear that this bug was not coming while I was using IE 7 from IE 9 browser installed, it came only after upgrading. At last, I found the root cause, it was not the jquery, not my JS code, not the custom dropdowns, even not all the pages were throwing this error, this was due to the jquery validate plugin, and thanks to  jester12345  who acknowledged the bug at  https://github.com/jzaefferer/jquery-validation/issues/845  an
Post a Comment
Read more