×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
⾏行動平台與 Web： 與限制和體驗奮戰 笨笨的⼩小B (Littlebtc) COSCUP 2013 / MozTW Community Track Slides (C) 2013 Littlebtc , Released under CC-BY-SA-3.0 except otherwise noted.
Slide 2
Slide 2 text
About Me 我是⼩小B @ MozTW ～～～ 有關我的⼯工作請參照（講完的）Kamigami 場 我的業餘專案有 NicoFox 和 TouchLimit
Slide 3
Slide 3 text
恨鐵不成鋼，但還是很喜歡
Slide 4
Slide 4 text
Mobile Web 沒那麼簡單 RWD 只是讓你的網⾴頁「看起來」可以⽤用 這些才是真⼯工夫 順不順 能不能⽤用 ⽅方不⽅方便
Slide 5
Slide 5 text
Mobile Web 的兩⼤大問題 限制 效能、未實作功能與 Bug、既成枷鎖、... 體驗 包成 App vs 瀏覽器、UI、功能取捨、...
Slide 6
Slide 6 text
Mobile Web 的兩⼤大問題 限制 效能、未實作功能與 Bug、既成枷鎖、... 體驗 包成 App vs 瀏覽器、UI、功能取捨、...
Slide 7
Slide 7 text
......你要指望這樣的裝置能多快？ ⽐比筆電耗電量少⼀一半⼀一上 ⽐比筆電更輕更薄好幾倍 要能⽤用 WiFi、GPRS/EDGE/3G/HSPA/LTE/LTE-A 還要能拍照能 GPS 等⼗十年⽐比較快 有關效能
Slide 8
Slide 8 text
⼿手機瀏覽器慢哪條？ 網路（特指⾏行動網路，最殘酷的現實） JavaScript JIT 推進器普及，甚⾄至現在主流是兩段推進器了 雖然還是⽐比桌機慢很多但不會很慘 GC Pause 也是⼀一個問題，但⼤大家正在改善 DOM / CSS 真正的瓶頸（被以為是 JS 的部份） 複雜的樹狀運算對⼿手機很傷 Layout 與實際成像 ⻑⾧長⾴頁⾯面、複雜的效果、......
Slide 9
Slide 9 text
那功能上呢？ position: fixed 到 iOS 5 與 Android 2.x 才開始慢慢⽀支援 Android ⻑⾧長期存在會把 Click 拖很久的問題 其他族繁不及備載 另⼀一個問題是，並不是所有⼈人都能更新到最新瀏覽器 （尤其是 Android）
Slide 10
Slide 10 text
⼿手機瀏覽器很糟嗎？ 以下為真實案例， 我在 iOS 或 Android 上遇到的「靈異現象」： 就是不給你出來的 CSS Transition（兩平台都有） 爛掉的渲染結果（Android） 捲不動的網⾴頁（WebKit） 按不到的按鈕（Android） etc...
Slide 11
Slide 11 text
Fair-use meme, not under CC.
Slide 12
Slide 12 text
有解嗎？ 花時間去找出每種機器上的問題修復 花時間對各種瀏覽器進⾏行最佳化 or 相信⼀一些奇妙的現成⽅方案 jQuery Mobile（缺乏 App 製作上的最佳化） Sencha（開嗆 Fb 的那個，不⽀支援 Firefox |||） famo.us（你們到底好了嗎？ QQ）
Slide 13
Slide 13 text
Mobile Web 的兩⼤大問題 限制 效能、未實作功能與 Bug、既成枷鎖、... 體驗 包成 App vs 瀏覽器、UI、功能取捨、...
Slide 14
Slide 14 text
形式的取捨 以 PhoneGap 包成 App 根據各平台微調 App 的設計（體驗考量） 直接⽤用瀏覽器⽅方式提供 要不要分⼿手機版和桌⾯面版？（使⽤用便利性考量） 哪些功能要留或要砍？（流量考量）
Slide 15
Slide 15 text
不同 OS 有不同 Design Fair use. iOS 7 Design (C) Apple Inc. Gmail Play Store Preview Image (C) Google Inc.
Slide 16
Slide 16 text
格格不⼊入很⿇麻煩 Fair use. (C) Dept. of Transportation, Taipei City & (C) Taiwan Area National Freeway Bureau.
Slide 17
Slide 17 text
「最⼤大公約數」 Fair Use. From App Store and Google Play Store. (C) Facebook, Inc.
Slide 18
Slide 18 text
功能性取捨：切換 Fair Use. (C) Vox Media, Inc, & (C) udn.com.
Slide 19
Slide 19 text
共勉之 ⼿手機復⼿手機，⼿手機何其多。 我⽣生待 Bug 消，萬事成蹉跎 時間也許會解決技術問題 但體驗是需要好好努⼒力的東⻄西
Slide 20
Slide 20 text
Thanks! :)