Internet Explorer 10: 重新想像網站設計

本投影片介紹如何針對 Internet Explorer 10 的新特性，以及支援的多樣平台上，重新想像網頁設計的細節。

範例程式碼在 http://github.com/ericsk/ie10-samples

Transcript

1. Internet Explorer 10 重新想像網站設計
2. Agenda
4. 各種 Internet Explorer 10
6. 使用 HTML5 優化網站效能
7. 使用 CSS3 優化網站排版或效果顯示
9. 秘技: <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
11. @media (max-width: 480px) { body { padding-top: 70px; } } @media (max-width: 768px) { body { padding-top: 0; } } 根據不同的解析度套用不同的樣式
12. if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { // the user's hardware supports touch input }
13. <input type="email" >
14. Value Description auto Default value for -ms-touch-action. Browser determines. none No default behavior is allowed. manipulation Only panning, pinch zoom, and swiping to navigate forward or back are allowed. double-tap-zoom Only double-tap zooming is allowed. inherit The element inherits the value of -ms-touch-action from its parent. -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit; 利用觸控方式捲動和縮放: http://msdn.microsoft.com/zh-TW/library/ie/hh920761.aspx
15. Pointer Event event.pointerType var el = document.getElementById('drawface'); // 判斷是否支援 pointer event if (navigator.msPointerEnabled) { el.addEventListener('MSPointerDown', handleTouchInput, false); } else { // fallback el.addEventListener('mousedown', handleTouchInput, false); } 參考: http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
16. Gesture event var el = document.getElementById('drawface'); var gesture = new MSGesture(); // 加入 pointer el.addEventListener('MSPointerDown', function (evt) { gesture.addPointer(evt.pointerId); }, false); // Tap and Hold el.addEventListener('MSGestureTap', handleTap, false); el.addEventListener('MSGestureHold', handleHold, false); // dynamic gesture // 讀取 evt.scale, evt.rotate, evt.translationX, evt.translationY, // evt.velocityAngular, evt.velocityExpansion, evt.velocityX, evt.velocityY el.addEventListener('MSGestureChange', handleGesture, false); 參考: http://blogs.msdn.com/b/ie/archive/2012/06/20/go-beyond-pan-zoom-and-tap-using-gesture-events.aspx
17. 讓您的網站支援觸控操作: http://msdn.microsoft.com/zh-TW/library/ie/jj583807.aspx
18. 釘選網站 (Pinned Site) http://buildmypinnedsite.com/ <meta name="msapplication-TileImage" content="logo.png" > <meta name="msapplication-TileColor" content="#123456" >
19. Windows 8 子母畫面 (Snapped view) @media screen and (max-width: 400px) { @-ms-viewport { width: 320px; } /* 當 Modern IE10 在貼齊模式時的樣式設定，並且將 可視區域設為 320px */ } Full Snap
20. 快速翻頁 (Flip ahead) 點擊翻頁鍵、或是從右 swipe 至左 <link rel="prev" href="/page/2"> <link rel="next" href="/page/4">
21. 從 Web 到 App <meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="在市集中的 Package 名稱">
23. http://msdn.microsoft.com/ie http://blogs.msdn.com/b/ie http://ietestdrive.com/ http://buildmypinnedsite.com