Most simple sample for ‘jQuery Mobile’

When I start develop with jQuery Mobile. I use this sample.

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hash watcher</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</head>
<body>
<div data-role="page">
<div data-role="header">header</div>
<div data-role="content">body</div>
<div data-role="footer">footer</div>
</div>
</body>
</html>

jQuery Mobile is from CDN(Contents Delivery Network). and add the “data-role” attribute on the HTML tag.
Let’s start develop the programs.

How I devide the Web page by Smartphone?

We made a Web site for PC and Smartphone. want to divide the page by devices. It’s very easy.

We can use the “UserAgent”. for example iPhone4′s agent is…

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

Now, We can use the keyword “iPhone”. And Android’s agent is “Android”.

We can get the User agent at “$_SERVER['HTTP_USER_AGENT']” on PHP.
I make the sample program.

if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false) {
	// iPhone
} else if (strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false) {
	// Android
}

That’s all.

Introduce

Hi, I’m TANIGUCHI Makoto. a Web programmer(JavaScript, PHP and more.) in Japan.

I can’t speak English well. but I am studying now.

This blog. My English blog. I’ll write topics to JavaScript(jQuery), PHP, Web technology, digital gadgets..

I’m sorry very poor English. Please teach me the wrong sentence.