10 Easy Code Snippets for Mobile Development

10 Easy Code Snippets for Mobile Development

By Jesse PenningtonNov 8 /2012

blog iphone imageIn less than three decades, the mobile phone has gone from being a status symbol to being a omnipresent technology that facilitates almost every interaction in our daily lives. In fact, a recent study showed that mobile search will outpace desktop search by 2015. As mobile development and responsive design continue to grow, I find myself using the same code over and over for certain things. So, I thought it would be a good idea to share some of those snippets here for you to grab as a quick resource in your mobile development.

Set your website to a specific width, scale or stylesheet based on viewport or dimensions

Adding this to the header of your page will set the website to the width of the mobile browser viewport. This will prevent the scaling and zooming you would see otherwise.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

In addition, you can also use the viewport setting to indicate an exact width to kick in and create a custom range for scaling on the mobile browser.

<meta name="viewport" content="width=440px, minimum-scale=0.5, maximum-scale=1.0" />

Specify CSS Styles for iPhone/mobile Only

We can also use a code in the header to call up a specific stylesheet for mobile based on the dimensions only, instead of targeting a specific device.

<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" />

If your mobile website uses the same HTML as your normal website, this is another way to add specific styles for specific screen dimensions (i.e. mobile and/or tablet).

@media screen and (max-device-width: 480px){
/* Place mobile specific CSS code in here */
}

Special Anchor Link Types

These are some great quick links you can add to an element to let the user initiate a call or send a text to a specified number upon clicking it.

<a href="tel:55551234">Call me now</a>

<a href="sms:55551234">Send me text</a>

Hide the URL bar when your site loads on the iPhone

A lot of people find this is a simple, useful way to save a little screen real estate on the iPhone and get more of your site above the fold by hiding the URL bar. There are more complicated ways to implement it, so I've listed a couple ways I've seen it done so you can test them out.

Simple code:
window.scrollTo(0, 1);

Same code with one second delay:
setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);

Add an iPhone touch icon to your site

When bookmarking a website to your iPhone, it will automatically take a screenshot. With this you can specify if you would like an icon/logo instead. The image should be 57px by 57px in .png format. You do not need to add any corners or effects because the iPhone will do that for you.

<link rel="apple-touch-icon" href="images/websiteIcon.png"/>

Rounded Corners Using CSS3

You can create rounded corners for your content boxes/areas using the webkit CSS3 rounded corners extension. This is a great way to avoid using background images or dealing with cross-browser compatibility issues. I've provided all the parameters that should give you good cross-browser support (save for IE):

.yourBox {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
background-color: #eee;
border: 1px solid #bbb;
}

If you have any tips, feedback or code that you’d like to share, please feel free to add it to the comments section below!



Jesse Pennington Author BioJesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communications and has over 3 years of experience in web development and design.


Creating Content for Marketing Automation