• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web Optimization
 

Mobile Web Optimization

on

  • 1,574 views

http://MobileDev.TW

http://MobileDev.TW

Statistics

Views

Total Views
1,574
Views on SlideShare
1,574
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Web Optimization Mobile Web Optimization Presentation Transcript

    • 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 •  Android SDK •  /tools/android指令開啓 2.  主機+實機 •  無線網路 •  主機Web Server •  iPhone實機 •  iOS Safari •  Android實機 •  Android Browser 3.  Editor •  NotePad++ •  TextWrangler •  Aptana 4
    • 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.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
    • 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 •  1136 = 960 + 176 http://MobileDev.TW11
    • 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 = "viewport" content = "initial-scale = 1.0">
    • MWeb Viewport scale 設定的差異 http://MobileDev.TW16 1-3.html 圖片大小:200px * 200px Viewport:initial-scale=1.5 <meta name = "viewport" content = "initial-scale = 1.5">
    • 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 = "initial-scale = 1.0">
    • MWeb Viewport scale 設定的差異 http://MobileDev.TW19 2-3.html Viewport:initial-scale=1.5 <meta name = "viewport" content = "initial-scale = 1.5">
    • 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 = "width=320px">
    • 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"/> <input type="text" name="last-name" autocapitalize="off"/> http://MobileDev.TW33
    • MWeb Web App 設定 http://MobileDev.TW34
    • 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
    • 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
    • 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
    • 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 出去就回不來了…….
    • MWeb Building Mobile-Optimized Website Google Developer Site - Webmasters http://MobileDev.TW39
    • MWeb 三種做法 •  轉向 •  相同URL,但是依據不同裝置直接給予不同的HTML •  直接分開 •  直接分成桌面端的URL與行動端的URL •  RWD •  相同URL,相同HTML,但依據不同裝置使用不同CSS http://MobileDev.TW40
    • 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://MobileDev.TW43
    • MWeb Media Query 透過不同的螢幕大小,給予使用不同的CSS http://MobileDev.TW44
    • MWeb Media Type •  all •  braille •  盲人點字裝置 •  embossed •  盲人點字列印 •  handheld •  小螢幕、手持式裝置 •  print •  列印預覽 •  projection •  演講投影用 •  screen •  電腦螢幕 •  speech •  聽覺形態 •  tty •  終端機 •  tv •  電視類型 http://MobileDev.TW45
    • MWeb 目標族群 •  手機橫向、平板直立、小螢幕桌面 @media screen and (min-width:480px) and (max-width:800px) •  手機直向 @media screen and (max-width:479px) http://MobileDev.TW46
    • MWeb 區分直向橫向 •  橫向 @media all and (orientation: landscape) •  直向 @media all and (orientation: portrait) http://MobileDev.TW47
    • MWeb Google 目前設計 •  螢幕解析度1024pixel以上 •  螢幕解析度 480 ~ 800 •  @media screen and (max-width:800px){ … } •  螢幕解析度480以下 •  @media screen and (max-width:479px){ … } http://MobileDev.TW48
    • 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