NTU CCSP 2012Fall - Mobile Web入門 回首網頁開發

Transcript

1. Mobile Web入門 回首網頁開發 NTU CCSP 2012Fall
2. • mobile device普及的時候，針對 mobile最佳化的網頁還不多，所以有 viewport的設計。 • viewport：rendering engine認為的畫 面大小。 • 在desktop，viewport大小同browser 大小。 • 為了讓mobile device可以瀏覽一般 網頁，另為導入scale機制。 #1 a pixel is not a pixel
3. mobile最佳化 • <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"> • 把上面這行加到head裡 • width=device-width ◦ viewport寬度同裝置寬度 • initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum- scale=1.0 ◦ 完全鎖死放大與縮小 ◦ 缺一不可 • viewport metadata在desktop是無用的
4. #2 scrollbar • 再見，難看的scrollbar。 • http://css-tricks.com/custom-scrollbars-in-webkit/ • webkit only QQ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb { background: #999; }
5. #3 更多 • 捲動阻尼與動能 ◦ * {-webkit-overflow-scrolling: touch;} • 移除按鈕顏色 ◦ * {-webkit-tap-highlight-color:rgba(0,0,0,0);} •
6. what is webkit • Safari的核心 所以是蘋果公司的 但開放原始碼 ◦ 其實apple對open source也是有貢獻的 ◦ 包含著名的LLVM專案 • 網頁排版/渲染引擎+JS引擎 ◦ 動態網頁技術讓兩者越來越密不可分 • 源自開源桌面系統KDE • Chrome也是webkit-based但改用買來的V8 engine
7. #4 js scroller • native scroller ◦ 不需要js ◦ 比較侷限 • js scoller ◦ 用大廠牌的就對了 ◦ https://github.com/zynga/scroller ◦ Demo ▪ http://zynga.github.com/scroller/demo/easyscroller.html ▪ http://zynga.github.com/scroller/demo/dom-snapping.html
8. #5 touchstart • click和touch傻傻分不清楚 • webkit-based導入300ms的點擊延遲 • 只對按鈕使用touchstart事件 • $('body').on('touchstart click', 'a', function(e){...}); • 或使用套件 https://github.com/ftlabs/fastclick
9. #6 position: fixed • mobile web在去年對position: fixed的支援度還不高 • 目前算是相對健全了 http://caniuse.com/
10. #7 transform/transition很吃資源 • http://csc-studio.tumblr.com/post/25840306358 • 啟用3D加速 • 原則：不要為了特效而特效 • 比起沒有特效 使用者更討厭讀取慢和crash *{ -webkit-backface-visibility: hidden; -webkit-perspective: 0; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); }
11. #8 APP包WEB? • 俗稱WebView-Based App • 框架 ◦ PhoneGap ◦ Sencha Touch ◦ jQuery mobile • 優點 ◦ 讓Web開發人員可以開發App • 缺點 ◦ write once debug everywhere ◦ webview和mobile web browser的效能有差
12. #9 即使是chrome... • 雖然chrome的開發者工具可以調整user-agent和視窗大小 • 但沒有真的在mobile browser上跑過 是不能知道bug的.... • 例如 ◦ 位置transition有機率破壞touchstart事件的觸發 ◦ fixed+transition也會破壞touchstart事件的觸發 ◦ 可能是瀏覽器內和在動畫結束後沒有重新計算事件觸發的區域
13. #10 不只要會用套件 • 更要能改套件與看懂套件的code • 例如bootstrap的dropdown不能正確收闔的bug ◦ https://github.com/twitter/bootstrap/issues/5094
14. #11 media query /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... } • 幾個重要的值 ◦ 1024px landscape ipad ◦ 768px portrait ipad ◦ 480px landscape iphone ◦ 320px portrait iphone
15. #12 media query的小問題 • 前面有提到桌面瀏覽器不能鎖死viewport • Ctrl+與Ctrl-會調整CSS pixel • 最好的CSS單位其實是em 但很難用.... • 結法 ◦ 盡量避免overflow: hidden
16. #13 Responsive Web Design • RWD ◦ 相對減少人力需求 ◦ 較難最佳化 ▪ 最佳化過頭不就變成SD • Specific Design ◦ 最佳化顯示 ◦ 需要較多人月 ◦ stackoverflow.com
17. #14 Real-Time Web var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); }); /////////////////////////////////////////////////////////////////////////////////////////////////////////// <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); </script>
18. #15 WebGL • https://turbulenz.com/ • three.js https://github.com/mrdoob/three.js/ • desktop browser除了IE都ready了 ◦ MS覺得安全性有問題?! • mobile borwser都還沒 哭哭 • 有可能大幅改變遊戲生態系
19. #16 Audio • Audio tag ◦ iOS需要使用者觸發 • Audio API ◦ 不建議使用
20. #17 WebRTC • http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and- iOS • Android/iOS/Chrome/Firefox Ready • http://www.webrtc.org • Google主推 • UDP-based => 較好的防火牆穿透 • 應用 ◦ P2P ◦ 即時視訊
21. #18 Stream API • http://www.html5rocks.com/en/tutorials/getusermedia/intro/
22. QA時間