The Document of Aska

3-5. SmartPhone

<!DOCTYPE html>
<html manifest="app-mobile.manifest">
<head>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>7kai Tasks</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/static/css/bootstrap-1.3.0.min.css">
<link rel="stylesheet" href="/static/css/app-base.css">
<link rel="stylesheet" href="/static/css/app-mobile.css">
<script src="/static/js/jquery-1.6.4.min.js"></script>
<script src="/static/js/iscroll.js"></script>
<script src="/static/js/app-core.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/app-mobile.js"></script>

ポイント

  1. metaタグでアプリっぽく
  2. jQuery Mobileを使わない
  3. PCと同等の状態からDOMを調整し画面を小さくする
  4. 画面下にメニューを固定するにはiscroll.js等が必要、割りきって上で妥協した方が楽
  5. applicationCacheはギリギリ..アウト感があるが割りきって使うのもあり