Mobile Web Optimization

http://MobileDev.TW

1. MWeb 1 Mobile Web Optimization RyanChung@ncu.edu.tw http://MobileDev.TW
2. MWeb 大綱 •  學習地圖 •  測試環境 •  行動網站最佳化 - Apple Safari Reference Library •  行動網站最佳化 – Google Webmasters http://MobileDev.TW 2
3. MWeb 學習地圖 http://MobileDev.TW 3
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
5. MWeb 測試環境 II http://MobileDev.TW 5
6. MWeb 測試環境 III http://MobileDev.TW 6
7. MWeb 網站最佳化 For iPhone Safari Reference Library http://MobileDev.TW 7
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.TW 8
9. MWeb Layout and Metrics on iPhone and iPod touch http://MobileDev.TW 9
10. MWeb iOS7 Mobile Safari http://MobileDev.TW 10
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.TW 11
12. MWeb iPhone & iPad http://MobileDev.TW 12
13. MWeb Viewport 桌面瀏覽器 網頁的可視區域 http://MobileDev.TW 13 行動瀏覽器 網頁的內容區域
14. MWeb Viewport scale 設定的差異 http://MobileDev.TW 14 1-1.html 圖片大小：200px * 200px Viewport：無設定
15. MWeb Viewport scale 設定的差異 http://MobileDev.TW 15 1-2.html 圖片大小：200px * 200px Viewport：initial-scale=1.0 <meta name = "viewport" content = "initial-scale = 1.0">
16. MWeb Viewport scale 設定的差異 http://MobileDev.TW 16 1-3.html 圖片大小：200px * 200px Viewport：initial-scale=1.5 <meta name = "viewport" content = "initial-scale = 1.5">
17. MWeb Viewport scale 設定的差異 http://MobileDev.TW 17 2-1.html Viewport：無設定
18. MWeb Viewport scale 設定的差異 http://MobileDev.TW 18 2-2.html Viewport：initial-scale=1.0 <meta name = "viewport" content = "initial-scale = 1.0">
19. MWeb Viewport scale 設定的差異 http://MobileDev.TW 19 2-3.html Viewport：initial-scale=1.5 <meta name = "viewport" content = "initial-scale = 1.5">
20. MWeb Viewport 與裝置方向 只設定initial scale為1.0時，Safari會自動調整viewport的寬度與高度。 (橫向與直向不同) http://MobileDev.TW 20
21. MWeb Viewport Width the viewport width is set to 320 on iPhone. http://MobileDev.TW 21 <meta name = "viewport" content = "width=320px">
22. MWeb 放大效果 the viewport width is set to 200 pixels on iPhone. http://MobileDev.TW 22
23. MWeb Web App Viewport <meta name = "viewport" content = "width=device-width"> http://MobileDev.TW 23
24. MWeb 透過CSS來調整網頁 http://MobileDev.TW 24
25. MWeb -webkit-text-size-adjust http://MobileDev.TW 25 無設定 150% 200% p{-webkit-text-size-adjust:200%}
26. MWeb -webkit-tap-highlight-color 改變點選時的顏色 http://MobileDev.TW 26 -webkit-tap-highlight-color:rgba(200,0,0,0.4)
27. MWeb 表單處理 •  須考量當鍵盤出現與否，使用者看到的畫面 •  透過CSS來改變表單的樣式 •  自動校正與首字大寫控制 http://MobileDev.TW 27
28. MWeb 須考慮虛擬鍵盤的大小 http://MobileDev.TW 28
29. MWeb 尺寸 http://MobileDev.TW 29
30. MWeb 客製化選項 http://MobileDev.TW 30
31. MWeb 客製化選項 http://MobileDev.TW 31
32. MWeb 客製化選項 http://MobileDev.TW 32
33. MWeb 自動校正與首字大寫 一般文字輸入欄位Safari會預設開啓自動校正與首字大寫的 功能，帳號輸入欄位應設定為關閉。 <input type="text" name="field1" autocorrect = "off"/> <input type="text" name="last-name" autocapitalize="off"/> http://MobileDev.TW 33
34. MWeb Web App 設定 http://MobileDev.TW 34
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.TW 35 120x120 76x76 152x152
36. MWeb 啓動圖片(Startup Image) <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes" > 建議大小： 320 x 480 640 x 960 (Retina) 640 x 1136 (iPhone5) http://MobileDev.TW 36
37. MWeb 全螢幕顯示 •  隱藏網址列與下方網頁工具列 <meta name="apple-mobile-web-app-capable" content="yes" /> •  改變最上方狀態列 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="translucent black" /> http://MobileDev.TW 37
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.TW 38 出去就回不來了…….
39. MWeb Building Mobile-Optimized Website Google Developer Site - Webmasters http://MobileDev.TW 39
40. MWeb 三種做法 •  轉向 •  相同URL，但是依據不同裝置直接給予不同的HTML •  直接分開 •  直接分成桌面端的URL與行動端的URL •  RWD •  相同URL，相同HTML，但依據不同裝置使用不同CSS http://MobileDev.TW 40
41. MWeb 轉向 首頁 (純判斷) 行動版 首頁 桌面版 首頁 http://MobileDev.TW 41
42. MWeb Responsive Web Design http://MobileDev.TW 42 Source：http://en.wikipedia.org/wiki/Responsive_web_design
43. MWeb RWD 主要學習重點 •  CSS3 Media Query •  偵測瀏覽器環境來決定使用哪一個CSS •  彈性版面配置 •  非固定的版面安排 •  彈性多媒體設定 •  自動按比例縮放的多媒體設定 http://MobileDev.TW 43
44. MWeb Media Query 透過不同的螢幕大小，給予使用不同的CSS http://MobileDev.TW 44
45. MWeb Media Type •  all •  braille •  盲人點字裝置 •  embossed •  盲人點字列印 •  handheld •  小螢幕、手持式裝置 •  print •  列印預覽 •  projection •  演講投影用 •  screen •  電腦螢幕 •  speech •  聽覺形態 •  tty •  終端機 •  tv •  電視類型 http://MobileDev.TW 45
46. MWeb 目標族群 •  手機橫向、平板直立、小螢幕桌面 @media screen and (min-width:480px) and (max-width:800px) •  手機直向 @media screen and (max-width:479px) http://MobileDev.TW 46
47. MWeb 區分直向橫向 •  橫向 @media all and (orientation: landscape) •  直向 @media all and (orientation: portrait) http://MobileDev.TW 47
48. MWeb Google 目前設計 •  螢幕解析度1024pixel以上 •  螢幕解析度 480 ~ 800 •  @media screen and (max-width:800px){ … } •  螢幕解析度480以下 •  @media screen and (max-width:479px){ … } http://MobileDev.TW 48
49. MWeb 直接寫在一起，可動態改變 http://MobileDev.TW 49
50. MWeb 直接寫在一起，可動態改變 http://MobileDev.TW 50
51. MWeb Lab.三個欄位的變化 http://MobileDev.TW 51
52. MWeb 開發宗旨 •  在任何的螢幕解析度下，都能讓內容易讀 •  維護一份內容，但設法使其能在各種裝置下可讀 •  不論視窗大小，避免出現橫向的捲軸 http://MobileDev.TW 52
53. MWeb 套用在圖片上的CSS img { max-width:100%} http://MobileDev.TW 53
54. MWeb 套用在圖片上的CSS img { max-width:100%} http://MobileDev.TW 54
55. MWeb Viewport Default Viewport •  Android：800px •  iOS：980px http://MobileDev.TW 55
56. MWeb 基本設定 http://MobileDev.TW 56
57. MWeb Viewport http://MobileDev.TW 57