• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WordCamp Tokyo 2011 「実践! オリジナルテーマで作るスマホサイト&マルチスクリーンサイト」
 

WordCamp Tokyo 2011 「実践! オリジナルテーマで作るスマホサイト&マルチスクリーンサイト」

on

  • 5,263 views

2011年 11月 27日に開催された WordCamp Tokyo ...

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

Statistics

Views

Total Views
5,263
Views on SlideShare
4,355
Embed Views
908

Actions

Likes
15
Downloads
85
Comments
0

10 Embeds 908

http://suema-r.com 310
http://gorton.jp 182
http://921138.com 163
http://www.web-cs.co.jp 118
http://act.exp.jp 52
http://paper.li 42
http://a0.twimg.com 20
http://fab-wp.biz 8
http://us-w1.rockmelt.com 8
http://webcache.googleusercontent.com 5
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

WordCamp Tokyo 2011 「実践! オリジナルテーマで作るスマホサイト&マルチスクリーンサイト」 WordCamp Tokyo 2011 「実践! オリジナルテーマで作るスマホサイト&マルチスクリーンサイト」 Presentation Transcript

  • ltzer@ se
  • ✓✓✓
  • ✓✓✓
  • ✓✓✓
  • $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));
  • ✓✓✓
  • ✓✓✓✓✓
  • ✓✓
  • <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,maximum-scale=1"> <meta name="viewport" content="width=680px">
  • ✓✓✓✓
  • ✓✓✓✓✓
  • <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" />
  • ✓✓✓
  • ✓✓✓
  • IS03 Galaxy S II GALAXY Tab004HWIDEOS
  • ✓✓✓
  • ✓✓✓
  • ✓✓✓
  • <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
  • UserAgentif (navigator.userAgent.indexOf(iPhone) > 0 &&navigator.userAgent.indexOf(iPad) == -1) { .... iPhone}if (jQuery(window).width() > 480 || window.innerWidth > 480) { .... 480}※jQuery
  • iPhone iPhone iPadiPad iPadAndroid Android MobileAndroid Android MobileAndroid SafariFirefox for Android FirefoxWindows Phone Windows Phone
  • ✓✓✓
  • <?php$posts = get_posts(post_type=page&page_id=5);foreach($posts as $post): setup_postdata($post); the_content();endforeach;?>
  • ✓✓✓