とりあえず簡単なサンプルから試してみました。
<!DOCTYPE html>
<html>
<head>
<!-- 画面サイズの横幅320pxで固定 -->
<meta name="viewport" content="width=320, user-scalable=no" />
<meta charset="utf-8" />
</head>
<body>
<!-- デジタル時計の画面を指定 -->
<div id="disp" style="font-size:48px;text-align:center;"></div>
<!-- 時計を表示するスクリプト -->
<script type="text/javascript">
setInterval(showTime, 500);
function showTime() {
var t = new Date();
// 時間を表示する
$("disp").innerHTML = t.getHours() + ":" +
t.getMinutes() + ":" +
t.getSeconds();
}
// DOM要素を取得する
function $(id) { return document.getElementById(id); }
</script>
</body>
</html>
簡易時計表示なるもの。
PC上のブラウザで見たもの
スマホ上で見たもの
あんまし画面の最適化の効果がよく分からない？
ということで次のサンプル
<html>^M
<head>^M
<meta charset="utf-8">^M
<title>Hello</title>^M
<meta name="viewport" content="width=device-width">^M
<link rel="stylesheet"^M
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />^M
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>^M
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>^M
</head>^M
<body>^M
<!-- ヘッダ部 -->
<div data-role="header" data-theme="e">
<h1>Test</h1>
<a href="jquery_sample.html" data-icon="home"
data-iconpos="notext">Home</a>
<a href="#add" data-icon="add">Add</a>
</div>
<!-- トップページの定義 -->^M
<div data-role="page" id="top">^M
<div data-role="header" data-theme="e">
<h1>Test</h1>
<a href="jquery_sample.html" data-icon="home"
data-iconpos="notext">Home</a>
<a href="#add" data-icon="add">Add</a>
</div>
<div data-role="content">^M
<div>こんにちは。今は、トップページです。</div>^M
<a href="#sub" data-role="button">サブページへ</a>^M
</div>^M
</div>^M
<!-- サブページ定義 -->^M
<div data-role="page" id="sub">^M
<div data-role="header"><h2>サブページ</h2></div>^M
<div data-role="content">^M
<div>サブに来ました。</div>^M
<ul data-role="listview" data-inset="true">
<li><a href="#">バナナ</a></li>
<li><a href="#">リンゴ</a></li>
<li><a href="#">イチゴ</a></li>
</ul>
<a href="#top" data-role="button">トップへ</a>^M
</div>^M
</div>^M
</body>^M
</html>
直接RaspberryPiにアップして編集したものを、各端末のブラウザで表示。
PC上のブラウザ
スマホ上のブラウザ
こう見ると、スマホ用に画面が最適化されているのが分かる。
今回jquery-mobileを試してみたが、色々おもしろそう〜な気がするw。
0 件のコメント:
コメントを投稿