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.TW2

3. MWeb
學習地圖
http://MobileDev.TW3

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.TW5

6. MWeb
測試環境 III
http://MobileDev.TW6

7. MWeb
網站最佳化 For iPhone
Safari Reference Library
http://MobileDev.TW7

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

9. MWeb
Layout and Metrics on iPhone and iPod touch
http://MobileDev.TW9

10. MWeb
iOS7 Mobile Safari
http://MobileDev.TW10

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

12. MWeb
iPhone & iPad
http://MobileDev.TW12

13. MWeb
Viewport
桌面瀏覽器
網頁的可視區域
http://MobileDev.TW13
行動瀏覽器
網頁的內容區域

14. MWeb
Viewport scale 設定的差異
http://MobileDev.TW14
1-1.html
圖片大小：200px * 200px
Viewport：無設定

15. MWeb
Viewport scale 設定的差異
http://MobileDev.TW15
1-2.html
圖片大小：200px * 200px
Viewport：initial-scale=1.0
<meta name = "viewport" content = "initial-scale = 1.0">

16. MWeb
Viewport scale 設定的差異
http://MobileDev.TW16
1-3.html
圖片大小：200px * 200px
Viewport：initial-scale=1.5
<meta name = "viewport" content = "initial-scale = 1.5">

17. MWeb
Viewport scale 設定的差異
http://MobileDev.TW17
2-1.html
Viewport：無設定

18. MWeb
Viewport scale 設定的差異
http://MobileDev.TW18
2-2.html
Viewport：initial-scale=1.0
<meta name = "viewport" content = "initial-scale = 1.0">

19. MWeb
Viewport scale 設定的差異
http://MobileDev.TW19
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.TW20

21. MWeb
Viewport Width
the viewport width is set to 320 on iPhone.
http://MobileDev.TW21
<meta name = "viewport" content = "width=320px">

22. MWeb
放大效果
the viewport width is set to 200 pixels on iPhone.
http://MobileDev.TW22

23. MWeb
Web App Viewport
<meta name = "viewport" content = "width=device-width">
http://MobileDev.TW23

24. MWeb
透過CSS來調整網頁
http://MobileDev.TW24

25. MWeb
-webkit-text-size-adjust
http://MobileDev.TW25
無設定 150% 200%
p{-webkit-text-size-adjust:200%}

26. MWeb
-webkit-tap-highlight-color
改變點選時的顏色
http://MobileDev.TW26
-webkit-tap-highlight-color:rgba(200,0,0,0.4)

27. MWeb
表單處理
• 須考量當鍵盤出現與否，使用者看到的畫面
• 透過CSS來改變表單的樣式
• 自動校正與首字大寫控制
http://MobileDev.TW27

28. MWeb
須考慮虛擬鍵盤的大小
http://MobileDev.TW28

29. MWeb
尺寸
http://MobileDev.TW29

30. MWeb
客製化選項
http://MobileDev.TW30

31. MWeb
客製化選項
http://MobileDev.TW31

32. MWeb
客製化選項
http://MobileDev.TW32

33. MWeb
自動校正與首字大寫
一般文字輸入欄位Safari會預設開啓自動校正與首字大寫的
功能，帳號輸入欄位應設定為關閉。
<input type="text" name="field1" autocorrect = "off"/>
<input type="text" name="last-name" autocapitalize="off"/>
http://MobileDev.TW33

34. MWeb
Web App 設定
http://MobileDev.TW34

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

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.TW36

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.TW37

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
出去就回不來了…….

39. MWeb
Building Mobile-Optimized Website
Google Developer Site - Webmasters
http://MobileDev.TW39

40. MWeb
三種做法
• 轉向
• 相同URL，但是依據不同裝置直接給予不同的HTML
• 直接分開
• 直接分成桌面端的URL與行動端的URL
• RWD
• 相同URL，相同HTML，但依據不同裝置使用不同CSS
http://MobileDev.TW40

41. MWeb
轉向
首頁
(純判斷)
行動版
首頁
桌面版
首頁
http://MobileDev.TW41

42. MWeb
Responsive Web Design
http://MobileDev.TW42
Source：http://en.wikipedia.org/wiki/Responsive_web_design

43. MWeb
RWD 主要學習重點
• CSS3 Media Query
• 偵測瀏覽器環境來決定使用哪一個CSS
• 彈性版面配置
• 非固定的版面安排
• 彈性多媒體設定
• 自動按比例縮放的多媒體設定
http://MobileDev.TW43

44. MWeb
Media Query
透過不同的螢幕大小，給予使用不同的CSS
http://MobileDev.TW44

45. MWeb
Media Type
• all
• braille
• 盲人點字裝置
• embossed
• 盲人點字列印
• handheld
• 小螢幕、手持式裝置
• print
• 列印預覽
• projection
• 演講投影用
• screen
• 電腦螢幕
• speech
• 聽覺形態
• tty
• 終端機
• tv
• 電視類型
http://MobileDev.TW45

46. MWeb
目標族群
• 手機橫向、平板直立、小螢幕桌面
@media screen and (min-width:480px) and
(max-width:800px)
• 手機直向
@media screen and (max-width:479px)
http://MobileDev.TW46

47. MWeb
區分直向橫向
• 橫向
@media all and (orientation: landscape)
• 直向
@media all and (orientation: portrait)
http://MobileDev.TW47

48. MWeb
Google 目前設計
• 螢幕解析度1024pixel以上
• 螢幕解析度 480 ~ 800
• @media screen and (max-width:800px){ … }
• 螢幕解析度480以下
• @media screen and (max-width:479px){ … }
http://MobileDev.TW48

49. MWeb
直接寫在一起，可動態改變
http://MobileDev.TW49

50. MWeb
直接寫在一起，可動態改變
http://MobileDev.TW50

51. MWeb
Lab.三個欄位的變化
http://MobileDev.TW51

52. MWeb
開發宗旨
• 在任何的螢幕解析度下，都能讓內容易讀
• 維護一份內容，但設法使其能在各種裝置下可讀
• 不論視窗大小，避免出現橫向的捲軸
http://MobileDev.TW52

53. MWeb
套用在圖片上的CSS
img { max-width:100%}
http://MobileDev.TW53

54. MWeb
套用在圖片上的CSS
img { max-width:100%}
http://MobileDev.TW54

55. MWeb
Viewport
Default Viewport
• Android：800px
• iOS：980px
http://MobileDev.TW55

56. MWeb
基本設定
http://MobileDev.TW56

57. MWeb
Viewport
http://MobileDev.TW57