More Related Content
Similar to Mobile Web Optimization (20)
More from Ryan Chung (20)
Mobile Web Optimization
- 2. MWeb
大綱
• 學習地圖
• 測試環境
• 行動網站最佳化 - Apple Safari Reference Library
• 行動網站最佳化 – Google Webmasters
http://MobileDev.TW2
- 4. MWeb
測試環境
1. 主機+虛擬機
• Firefox
• Chrome
• Opera
• Safari
• iOS Simulator
• MAC + iOS SDK
• Android Emulator
• Android SDK
• /tools/android指令開啓
2. 主機+實機
• 無線網路
• 主機Web Server
• iPhone實機
• iOS Safari
• Android實機
• Android Browser
3. Editor
• NotePad++
• TextWrangler
• Aptana
4
- 8. MWeb
指定專屬CSS
• 指定專屬的CSS給iPhone與iPod Touch使用
<link media="only screen and (max-device-width: 480px)"
href="small-device.css" type= "text/css" rel="stylesheet”>
• 其他裝置使用的CSS
<link media="screen and (min-device-width: 481px)"
href="not-small-device.css" type="text/css" rel="stylesheet”>
http://MobileDev.TW8
- 11. MWeb
Retina & iPhone5
• iPhone/iPod Touch 1~3
• 320 x 480
• iPhone 4 Retina
• 640 x 960
• iPhone 5
• 640 x 1136
• 1136 = 960 + 176
http://MobileDev.TW11
- 35. MWeb
指定桌面圖示(Web Clip)
• 全網站使用
• 直接在網站根目錄放
apple-touch-icon.png 或
apple-touch-icon-precomposed.png (Safari不會做任何加工)
• 單一頁面使用(會取代全網站使用的圖示)
<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
(第二個Safari不會做任何加工) iOS7之後,都不加工
• 提供不同裝置解析度使用
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
http://MobileDev.TW35
120x12076x76 152x152
- 38. MWeb
外部連結
• 用內建Mail軟體寄信
• <a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
• 打電話(iPhone)/加入連絡人(iPod Touch)
• <a href="tel:0800-000-080">Call now</a>
• FaceTime
• <a href="facetime:user@example.com">Connect using FaceTime</a>
• 送簡訊
• <a href="sms:886-988-988-988">New SMS Message</a>
• 打開內建地圖,搜尋特定位置
• <a href="http://maps.apple.com/?q=cupertino">Cupertino</a>
• 看Youtube
• <a class="noeffect" href="http://www.youtube.com/yourvideo">Watch</a>
• 開iTune或Appstore看特定項目
• <a class="noeffect" href="http://itunes.apple.com/us/app/zinio-magazine
-newsstand-reader/id364297166?mt=8">Open App</a>
http://MobileDev.TW38
出去就回不來了…….
- 43. MWeb
RWD 主要學習重點
• CSS3 Media Query
• 偵測瀏覽器環境來決定使用哪一個CSS
• 彈性版面配置
• 非固定的版面安排
• 彈性多媒體設定
• 自動按比例縮放的多媒體設定
http://MobileDev.TW43
- 45. MWeb
Media Type
• all
• braille
• 盲人點字裝置
• embossed
• 盲人點字列印
• handheld
• 小螢幕、手持式裝置
• print
• 列印預覽
• projection
• 演講投影用
• screen
• 電腦螢幕
• speech
• 聽覺形態
• tty
• 終端機
• tv
• 電視類型
http://MobileDev.TW45