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

● mobile device普及的時候，針對 mobile最佳化的網頁還不多，所以有 viewport的設計。 ● viewport：rendering engine認為的畫 面大小。 ● 在desktop，viewport大小同browser 大小。 ● 為了讓mobile device可以瀏覽一般 網頁，另為導入scale機制。 #1 a pixel is not a pixel 

mobile最佳化 ● ● 把上面這行加到head裡 ● width=device-width ○ viewport寬度同裝置寬度 ● initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum- scale=1.0 ○ 完全鎖死放大與縮小 ○ 缺一不可 ● viewport metadata在desktop是無用的 

#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; } 

#3 更多 ● 捲動阻尼與動能 ○ * {-webkit-overflow-scrolling: touch;} ● 移除按鈕顏色 ○ * {-webkit-tap-highlight-color:rgba(0,0,0,0);} ● 

what is webkit ● Safari的核心 所以是蘋果公司的 但開放原始碼 ○ 其實apple對open source也是有貢獻的 ○ 包含著名的LLVM專案 ● 網頁排版/渲染引擎+JS引擎 ○ 動態網頁技術讓兩者越來越密不可分 ● 源自開源桌面系統KDE ● Chrome也是webkit-based但改用買來的V8 engine 

#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 

#5 touchstart ● click和touch傻傻分不清楚 ● webkit-based導入300ms的點擊延遲 ● 只對按鈕使用touchstart事件 ● $('body').on('touchstart click', 'a', function(e){...}); ● 或使用套件 https://github.com/ftlabs/fastclick 

#6 position: fixed ● mobile web在去年對position: fixed的支援度還不高 ● 目前算是相對健全了 http://caniuse.com/ 

#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); } 

#8 APP包WEB? ● 俗稱WebView-Based App ● 框架 ○ PhoneGap ○ Sencha Touch ○ jQuery mobile ● 優點 ○ 讓Web開發人員可以開發App ● 缺點 ○ write once debug everywhere ○ webview和mobile web browser的效能有差 

#9 即使是chrome... ● 雖然chrome的開發者工具可以調整user-agent和視窗大小 ● 但沒有真的在mobile browser上跑過 是不能知道bug的.... ● 例如 ○ 位置transition有機率破壞touchstart事件的觸發 ○ fixed+transition也會破壞touchstart事件的觸發 ○ 可能是瀏覽器內和在動畫結束後沒有重新計算事件觸發的區域 

#10 不只要會用套件 ● 更要能改套件與看懂套件的code ● 例如bootstrap的dropdown不能正確收闔的bug ○ https://github.com/twitter/bootstrap/issues/5094 

#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 

#12 media query的小問題 ● 前面有提到桌面瀏覽器不能鎖死viewport ● Ctrl+與Ctrl-會調整CSS pixel ● 最好的CSS單位其實是em 但很難用.... ● 結法 ○ 盡量避免overflow: hidden 

#13 Responsive Web Design ● RWD ○ 相對減少人力需求 ○ 較難最佳化 ■ 最佳化過頭不就變成SD ● Specific Design ○ 最佳化顯示 ○ 需要較多人月 ○ stackoverflow.com 

#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); }); }); /////////////////////////////////////////////////////////////////////////////////////////////////////////// var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); 

#15 WebGL ● https://turbulenz.com/ ● three.js https://github.com/mrdoob/three.js/ ● desktop browser除了IE都ready了 ○ MS覺得安全性有問題?! ● mobile borwser都還沒 哭哭 ● 有可能大幅改變遊戲生態系 

#16 Audio ● Audio tag ○ iOS需要使用者觸發 ● Audio API ○ 不建議使用 

#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 ○ 即時視訊 

#18 Stream API ● http://www.html5rocks.com/en/tutorials/getusermedia/intro/ 

QA時間