Free Webcast: How To Create Killer Marketing Content – Learn More ›
Popular Today in Tech: All Popular Articles

10 Easy Code Snippets for Mobile Development

Mobile & Apps

10 Easy Code Snippets for Mobile Development image blog iphone image2In 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.

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.

Specifiy 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.

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).

Related Resources from B2C
» Free Webcast: Strategic Thinking: Social Media + Social Business Strategy

@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 specfied number upon clicking it.

Call me now

Send me text

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.

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!

10 Easy Code Snippets for Mobile Development image 07d95530 47d2 4975 ad98 07125260daac1

Comments on this Article: 0

Add a Comment

Add a Comment:


Thank you for adding to the conversation!

Our comments are moderated. Your comment may not appear immediately.