2011年 11月 27日に開催された WordCamp Tokyo 2011のデザイントラック「実践！　オリジナルテーマで作るスマホサイト＆マルチスクリーンサイト」のスライド資料（PDF版）です。別途、映像なども収録されたQuickTime版をこちら（http://dl.dropbox.com/u/219628/wordcamptokyo2011.mov）で公開しています。

4. ltzer
@ se

16. ✓
✓
✓

20. ✓
✓
✓

21. ✓
✓
✓

24. $this->addBrowser(new BrowserUA('safarimobile', 'Safari Mobile', null,
'^Mozilla/5.0 (.*) AppleWebKit/.* (KHTML, like Gecko)( Version
/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$',
'webkit,mobile'));
$this->addBrowser(new BrowserUA('safarimobile', 'Safari Mobile', null,
'^Mozilla/5.0 ((iPhone|iPod).*) AppleWebKit/.* (KHTML, like Gecko
)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*){0,1}$',
'webkit,mobile'));
$this->addBrowser(new BrowserUA('androidmobile', 'Android Mobile',
null, '^Mozilla/5.0 (Linux; U; Android.*) AppleWebKit/.* (KHTML,
like Gecko)( Version/.*){0,1} Mobile[/A-Z0-9]{0,}( Safari/.*)
{0,1}$', 'webkit,mobile'));

25. ✓
✓
✓

27. ✓
✓
✓
✓
✓

28. ✓
✓

29. ✓

34. <meta name="viewport" content="width=
device-width, user-scalable=no, initial-scale=1,
maximum-scale=1">
<meta name="viewport" content="width=680px">

36. ✓
✓
✓
✓

37. ✓
✓
✓
✓
✓

38. <meta name=”viewport” content=”width=device-width”>
<meta name=”format-detection” content=”telephone=no”>
<link rel="apple-touch-icon" href="icon57.png" />
<link rel="apple-touch-icon" sizes="57x57" href="icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icon114.png" />

41. ✓
✓
✓

43. ✓
✓
✓

45. IS03
Galaxy S II
GALAXY Tab
004HW
IDEOS

46. ✓
✓
✓

48. ✓
✓
✓

59. ✓
✓
✓

60. <link rel="stylesheet" type="text/css" href="mobile.css"
media="screen and (max-device-width: 320px)">
width
height
device-width
device-height
max-device-width
max-device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

61. UserAgent
if (navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) {
.... iPhone
}
if (jQuery(window).width() > 480 || window.innerWidth > 480) {
.... 480
}
※jQuery

62. iPhone
iPhone iPad
iPad
iPad
Android
Android Mobile
Android
Android Mobile
Android
Safari
Firefox for Android
Firefox
Windows Phone
Windows Phone

63. ✓
✓
✓

64. <?php
$posts = get_posts('post_type=page&page_id=5');
foreach($posts as $post):
setup_postdata($post);
the_content();
endforeach;
?>

67. ✓
✓
✓