MWeb 1
Mobile Web
Optimization
RyanChung@ncu.edu.tw
http://MobileDev.TW
MWeb
大綱
•  學習地圖
•  測試環境
•  行動網站最佳化 - Apple Safari Reference Library
•  行動網站最佳化 – Google Webmasters
http://MobileDev.TW2
MWeb
學習地圖
http://MobileDev.TW3
MWeb
測試環境
1.  主機+虛擬機
•  Firefox
•  Chrome
•  Opera
•  Safari
•  iOS Simulator
•  MAC + iOS SDK
•  Android Emulator
•  Andr...
MWeb
測試環境 II
http://MobileDev.TW5
MWeb
測試環境 III
http://MobileDev.TW6
MWeb
網站最佳化 For iPhone
Safari Reference Library
http://MobileDev.TW7
MWeb
指定專屬CSS
•  指定專屬的CSS給iPhone與iPod Touch使用
<link media="only screen and (max-device-width: 480px)"
href="small-device.cs...
MWeb
Layout and Metrics on iPhone and iPod touch
http://MobileDev.TW9
MWeb
iOS7 Mobile Safari
http://MobileDev.TW10
MWeb
Retina & iPhone5
•  iPhone/iPod Touch 1~3
•  320 x 480
•  iPhone 4 Retina
•  640 x 960
•  iPhone 5
•  640 x 1136
•  1...
MWeb
iPhone & iPad
http://MobileDev.TW12
MWeb
Viewport
桌面瀏覽器
網頁的可視區域
http://MobileDev.TW13
行動瀏覽器
網頁的內容區域
MWeb
Viewport scale 設定的差異
http://MobileDev.TW14
1-1.html
圖片大小:200px * 200px
Viewport:無設定
MWeb
Viewport scale 設定的差異
http://MobileDev.TW15
1-2.html
圖片大小:200px * 200px
Viewport:initial-scale=1.0
<meta name = "viewp...
MWeb
Viewport scale 設定的差異
http://MobileDev.TW16
1-3.html
圖片大小:200px * 200px
Viewport:initial-scale=1.5
<meta name = "viewp...
MWeb
Viewport scale 設定的差異
http://MobileDev.TW17
2-1.html
Viewport:無設定
MWeb
Viewport scale 設定的差異
http://MobileDev.TW18
2-2.html
Viewport:initial-scale=1.0
<meta name = "viewport" content = "ini...
MWeb
Viewport scale 設定的差異
http://MobileDev.TW19
2-3.html
Viewport:initial-scale=1.5
<meta name = "viewport" content = "ini...
MWeb
Viewport 與裝置方向
只設定initial scale為1.0時,Safari會自動調整viewport的寬度與高度。
(橫向與直向不同)
http://MobileDev.TW20
MWeb
Viewport Width
the viewport width is set to 320 on iPhone.
http://MobileDev.TW21
<meta name = "viewport" content = "w...
MWeb
放大效果
the viewport width is set to 200 pixels on iPhone.
http://MobileDev.TW22
MWeb
Web App Viewport
<meta name = "viewport" content = "width=device-width">
http://MobileDev.TW23
MWeb
透過CSS來調整網頁
http://MobileDev.TW24
MWeb
-webkit-text-size-adjust
http://MobileDev.TW25
無設定 150% 200%
p{-webkit-text-size-adjust:200%}
MWeb
-webkit-tap-highlight-color
改變點選時的顏色
http://MobileDev.TW26
-webkit-tap-highlight-color:rgba(200,0,0,0.4)
MWeb
表單處理
•  須考量當鍵盤出現與否,使用者看到的畫面
•  透過CSS來改變表單的樣式
•  自動校正與首字大寫控制
http://MobileDev.TW27
MWeb
須考慮虛擬鍵盤的大小
http://MobileDev.TW28
MWeb
尺寸
http://MobileDev.TW29
MWeb
客製化選項
http://MobileDev.TW30
MWeb
客製化選項
http://MobileDev.TW31
MWeb
客製化選項
http://MobileDev.TW32
MWeb
自動校正與首字大寫
一般文字輸入欄位Safari會預設開啓自動校正與首字大寫的
功能,帳號輸入欄位應設定為關閉。
<input type="text" name="field1" autocorrect = "off"/>
<inpu...
MWeb
Web App 設定
http://MobileDev.TW34
MWeb
指定桌面圖示(Web Clip)
•  全網站使用
•  直接在網站根目錄放
apple-touch-icon.png 或
apple-touch-icon-precomposed.png (Safari不會做任何加工)
•  單一頁...
MWeb
啓動圖片(Startup Image)
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capab...
MWeb
全螢幕顯示
•  隱藏網址列與下方網頁工具列
<meta name="apple-mobile-web-app-capable" content="yes" />
•  改變最上方狀態列
<meta name="apple-mobil...
MWeb
外部連結
•  用內建Mail軟體寄信
•  <a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
•  打電話(iPhone)/加入連絡人(iPod Touch)
• ...
MWeb
Building Mobile-Optimized Website
Google Developer Site - Webmasters
http://MobileDev.TW39
MWeb
三種做法
•  轉向
•  相同URL,但是依據不同裝置直接給予不同的HTML
•  直接分開
•  直接分成桌面端的URL與行動端的URL
•  RWD
•  相同URL,相同HTML,但依據不同裝置使用不同CSS
http://M...
MWeb
轉向
首頁
(純判斷)
行動版
首頁
桌面版
首頁
http://MobileDev.TW41
MWeb
Responsive Web Design
http://MobileDev.TW42
Source:http://en.wikipedia.org/wiki/Responsive_web_design
MWeb
RWD 主要學習重點
•  CSS3 Media Query
•  偵測瀏覽器環境來決定使用哪一個CSS
•  彈性版面配置
•  非固定的版面安排
•  彈性多媒體設定
•  自動按比例縮放的多媒體設定
http://MobileD...
MWeb
Media Query
透過不同的螢幕大小,給予使用不同的CSS
http://MobileDev.TW44
MWeb
Media Type
•  all
•  braille
•  盲人點字裝置
•  embossed
•  盲人點字列印
•  handheld
•  小螢幕、手持式裝置
•  print
•  列印預覽
•  projection
...
MWeb
目標族群
•  手機橫向、平板直立、小螢幕桌面
@media screen and (min-width:480px) and
(max-width:800px)
•  手機直向
@media screen and (max-widt...
MWeb
區分直向橫向
•  橫向
@media all and (orientation: landscape)
•  直向
@media all and (orientation: portrait)
http://MobileDev.TW...
MWeb
Google 目前設計
•  螢幕解析度1024pixel以上
•  螢幕解析度 480 ~ 800
•  @media screen and (max-width:800px){ … }
•  螢幕解析度480以下
•  @medi...
MWeb
直接寫在一起,可動態改變
http://MobileDev.TW49
MWeb
直接寫在一起,可動態改變
http://MobileDev.TW50
MWeb
Lab.三個欄位的變化
http://MobileDev.TW51
MWeb
開發宗旨
•  在任何的螢幕解析度下,都能讓內容易讀
•  維護一份內容,但設法使其能在各種裝置下可讀
•  不論視窗大小,避免出現橫向的捲軸
http://MobileDev.TW52
MWeb
套用在圖片上的CSS
img { max-width:100%}
http://MobileDev.TW53
MWeb
套用在圖片上的CSS
img { max-width:100%}
http://MobileDev.TW54
MWeb
Viewport
Default Viewport
•  Android:800px
•  iOS:980px
http://MobileDev.TW55
MWeb
基本設定
http://MobileDev.TW56
MWeb
Viewport
http://MobileDev.TW57
Upcoming SlideShare
Loading in …5
×

Mobile Web Optimization

1,767 views

Published on

http://MobileDev.TW

Published in: Technology, News & Politics
  • Be the first to comment

Mobile Web Optimization

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

×