スマートフォン対応でよく使うhtmlとjavascriptまとめ(からの抜粋)

参考： スマートフォン対応でよく使うhtml、css、javascriptのまとめ | 69log

スマートフォン対応(いわゆるレスポンシブ含む)で、あれやりたいこれやりたいをいちいちググるのが億劫で探したら69logさんという方が、そりゃーもー素晴らしくまとめてくださっていたので、自分的にも取っておきたくて引用。

html

基本的なviewport以外に、ホーム画面用アイコン設定とか。

<!-- //デバイスサイズにあわせて表示領域を変更する -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- //電話番号のリンクを無効化 -->
<meta name="format-detection" content="telephone=no">

<!-- //ホーム画面用アイコン -->
<link rel="apple-touch-icon" href="icon.png">

<!-- //ホーム画面用アイコンの光沢を無効化する -->
<link rel="apple-touch-icon-precomposed" href="icon.png">

<!-- //iPadホーム画面用アイコン -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png">

<!-- //iPhone4ホーム画面用アイコン -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png">

<!-- //splash画像の設定 -->
<link rel="apple-touch-startup-image" href="startup.png">

<!-- //homeボタンから起動時にfull screen modeで起動 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- //full screen mode起動時のステータスバーの色の変更 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

TEL,SMS

<!-- //リンクをクリックで電話をかける -->
<a href="tel:00000000000">00000000000</a>

<!-- //リンククリックでsms -->
<a href="sms:00000000000">sms</a>

<!-- //smsの送信秋複数 -->
<a href="sms:00000000000,1111111111">sms複数</a>

<!-- //smsの本文追加 -->
<a href="sms:00000000000,1111111111?body=%83e%83X%83g%83%81%83b%83Z%81%5b%83W">smsメッセージ</a>

Javascript関連

メディアクエリ・解像度関連

cssのmedia screenとかと同じような設定方法。

if ( window.matchMedia("only screen and (max-width: 480px")).matches ) {
     // For Mobile
} else if (window.matchMedia("only screen and (min-width: 481px) and (max-width: 1024px)").matches ) {
     // For Tablet
} else {
     // For PC
}

デバイスの解像度取得

if( window.devicePixelRatio == 2 )
{
  //iphone4,iphone4s
}
else if( window.devicePixelRatio == 1.5 )
{
  //Android
}
else
{
  //others
}

通信状態の取得

/*
Browser Object Model

navigator = {
  connection: {
    "type": "4",
    "UNKNOWN": "0",
    "ETHERNET": "1",
    "WIFI": "2",
    "CELL_2G": "3",
    "CELL_3G": "4"
  }
};
*/

switch (navigator.connection.type ) {
case 0:
//unknown
case 1:
//ETHERNET
break;

case 2:
//WIFI
break;

case 3:
//CELL_2G
break;

case 4:
//CELL_3G
break;

単にオンラインかどうか

if (window.navigator.onLine) 
{
    //online
}
else
{
    //offline
}

touchイベント関連

//スクリーンにタッチ
document.addEventListener("touchstart", touchHandler, false);

//タッチ後、指を動かす
document.addEventListener("touchmove", touchHandler, false);

//タッチ後、指を離す
document.addEventListener("touchend", touchHandler, false);

//タッチ後、指をスライドさせた(タッチをキャンセルした)
document.addEventListener("touchcancel", touchHandler, false);

//2本以上の指を使ってスクリーンにタッチ
document.addEventListener("gesturestart", gestureHandler, false);

//指が動く
document.addEventListener("gesturechange", gestureHandler, false);

//どちらかの指がスクリーンから離れる
//ちなみにこの後、残りの指を離すとtouchendが発生
document.addEventListener("gestureend", gestureHandler, false);

自分が本当によく使いそうなものだけピックアップ。

しかしよくまとまってる。。。