More Related Content
Viewers also liked (6)
Similar to Mobile Web Function Test (20)
More from Ryan Chung (20)
Mobile Web Function Test
- 2. 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 • Brackets • Sublime Text • Aptana 2
- 3. MWeb 適合在行動瀏覽器中閱讀？ How to make it suitable for mobile browsers? 3
- 5. MWeb Lab：RWD樣板套用 1. 從樣板網站中挑一個RWD樣板 2. 找到一個可以置放公開網頁的地方 3. 利用手機或模擬器進行測試 5
- 6. MWeb 可否從網頁中開啟照相並且拿到那一 張照片? Can we launch the camera from web and get the picture? 6
- 7. MWeb 功能與解決方案 • 開啟照相功能 • 使用表單中的檔案上傳功能，單一檔案時即可從照相 取得 • 取得相片 • 取得檔案上傳功能中的檔案，並透過HTML5的File API，你就可以拿到那一張照片來使用 • 使用readAsDataURL方法來取得檔案 7
- 10. MWeb 網頁可否取得手機加速度感應器的值? Can we get accelerometer value via mobile web? 10
- 11. MWeb 躲在window物件中 • 感應器 • 檢查window物件下有沒有DeviceMotionEvent • 監控devicemotion事件，觸發函數傳入物件event中 • event.accelerationIncludingGravity.x • event.accelerationIncludingGravity.y • event.accelerationIncludingGravity.z 11
- 12. MWeb Lab：從各種角度來觀看 • 結合感應器，從不同角度觀看一個物體 0 1 2 -1 -2 12
- 13. MWeb 使用者觸控反應與偵測 How to detect user touch event? 13
- 14. MWeb 使用者互動 • 觸控事件 • touchstart • touchmove • touchend • 高互動感 • CSS3-transition • 其他知識 • 用js改變一個元件的寬度 • style.width • 瀏覽器視窗中的寬度 • window.innerWidth • 一個元件的寬度 • element.scrollWidth 14