15 Useful Code Snippets for Smartphone Website

iphonesnippets

The number of smartphone users is getting increase and web designers have more opportunities to make smartphone-friendly websites these days. So I will share useful code snippets for smartphone website that I stock on my Evernote. I made a demo page, please have a look on your smartphone :)

Contents

Let me show you how it works. Please see the demo on your smartphone or browser (Don’t forget to change the user agent!).

Demo

  1. Making Web Pages Fit a Screen
  2. Disable Text Size Adjustment
  3. Increase Clickable Area
  4. Change CSS by Screen Width
  5. Make Div Clickable If There Is Link Text
  6. Flexible Images
  7. Display High Resolution Images for Background
  8. User-Agent detection
  9. Hide Address Bar
  10. Customize Home Screen Bookmark FavIcon
  11. Change Highlight Colour
  12. Numerical Inputs for Forms
  13. Disable Phone Number Links
  14. Hiding Safari User Interface Components
  15. Changing the Status Bar Appearance

1. Making Web Pages Fit a Screen

By default, web page width doesn’t fit a smartphone screen. Add following code to the <head></head> to make them fit.

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

Go to Contents

2. Disable Text Size Adjustment

iPhone automatically enlarges the text size to make it reads more comfortably. You can disable the text size adjustment by adding following code. If you want to make text size bigger or smaller, use percentage.

html {-webkit-text-size-adjust: 100%}

Go to Contents

3. Increase Clickable Area

The finger is thicker than you expected. There are so many navigation links that is hard to tap on a smartphone. Make a element to block element to increase clickable area.

#nav li a{ display: block; }

» Demo

Go to Contents

4. Change CSS by Screen Width

The iPhone has a screen size of 320×480 pixels. You can change CSS by screen width using Media Queries. Demo page displays pink background colour in portrait orientation, blue in landscape orientation.

@media screen and (max-width: 480px){ /* width 480px */
     body{ background: #80D0FF }
}
@media screen and (max-width: 320px){ /* width 320px */
    body{ background: #FFDBF3 }
}

» Demo

Go to Contents

5. Make Div Clickable If There Is Link Text

It is really hard to tap small link texts. Let’s make entire div clickable if there is link text using jQuery. Don’t forget to include jQuery file! That would be good way for “Read more” links.

$(function(){
     $("div").click(function(){
         window.location=$(this).find("a").attr("href");
         return false;
    });
});

» Demo

Go to Contents

6. Flexible Images

The images will run off the edge if images size is bigger than screen. To make the images flexible, simply add following CSS.

img {
     max-width: 100%;
     height: auto;
     }

» Demo

Go to Contents

7. Display High Resolution Images for Background

Web pages in Mobile Safari on iPhone 4 are scaled at twice the resolution of the earlier iPhone models. Here is how to make your images look clear on retina display. Use 600x300px image as a background and change width and height to 300x150px.

div{ -webkit-background-size: 300px 150px; } /* width height */

» Demo

Go to Contents

8. User-Agent detection

Here are 3 different ways to let smartphone users redirect to their smartphone compatible website: with JavaScript, PHP and .htaccess. The common user agent will be “iPhone”, “iPod”, “iPad” and “Android”. The following example, it goes to “http://mobile.example.com” if users are using iPhone. It also will be good to use to change CSS by device.

JavaScript

var ua = navigator.userAgent.toLowerCase();
var isiPhone = ua.indexOf("iphone") > -1;
if(isiPhone) {
     window.location = 'http://mobile.example.com';
}

PHP

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if((strpos($ua,'iPhone')==true)||(strpos($ua,'iPod')==true)||(strpos($ua,'Android')==true)) {
     header('Location: http://mobile.example.com');
     exit();
}
?>

.htaccess

RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobile.example.com [R=301]

Go to Contents

9. Hide Address Bar

Automatically hide address bar after page is loaded using JavaScript.

window.onload = function(){
     setTimeout("scrollTo(0,1)", 100);
}

» Demo

Go to Contents

10. Customize Home Screen Bookmark FavIcon

“Touch icons” are the favicons of mobile devices and tablets. You can customize your icon for home screen. Simply add the following code in the <head> and use rel="apple-touch-icon-precomposed" to prevent the iPhone / iPad from adding it’s own gloss.

<link rel="apple-touch-icon" href="favicon_big.png"> 

Go to Contents

11. Change Highlight Colour

By default, when the user taps a link text, Safari on iOS highlights the area in a transparent gray color. Using the -webkit-tap-highlight-color CSS property, you can either modify or disable this default behavior on your webpages.

a{-webkit-tap-highlight-color: #FF0}

» Demo

Go to Contents

12. Numerical Inputs for Forms

If you use type="number", the user gets the number and punctuation part of the keyboard when they focus. If you use input type="tel", the user gets the friendly numbers-only keypad, but if the input you wan’t isn’t a phone number then you shouldn’t use that. The best way will be use the following code.

<input type="text" pattern="[0-9]*">

» Demo

Go to Contents

13. Disable Phone Number Links

Safari on iPhone automatically creates links for strings of digits that appear to the telephone numbers. If you want to disable this, add following meta tag to <head>〜</head>.

<meta name="format-detection" content="telephone=no">

Go to Contents

14. Hiding Safari User Interface Components


When users bookmark your website on their home screen, you can hide URL text field and toolbar on the bottom. So only a status bar appears at the top of the screen. Add following code in the <head>

<meta name="apple-mobile-web-app-capable" content="yes">

Go to Contents

15. Changing the Status Bar Appearance

This one also effects for home screen bookmarked websites. Colours that you can choose are grey (default), black (black) and translucent black (black-translucent).

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Go to Contents

Let me know if you know more tips! ;)

Source:

Share

Comments

  • Jonah Luo

    Thanks. The tips are really helpful. Appreciated.