スマートフォン対応でよく使う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);

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

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

機械忍者

某SEO会社(?)勤務。 多分日本語よりHTMLの方が得意です。 最近はRubyとかいうキラキラな言語も勉強中です。 SEOはもう標準スキルになってきてると思うので正直もうあんまり昔ほどの熱意は感じません。 新たに躍動してる人も多いですしね。 だれか強化骨格コスプレあったら教えてください。