0
Internet Explorer 10重新想像網站設計
Agenda
各種 Internet Explorer 10
使用 HTML5 優化網站效能
使用 CSS3 優化網站排版或效果顯示
: <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
根據不同的解析度套用不同的樣式@media (max-width: 480px) {    body {        padding-top: 70px;    }}@media (max-width: 768px) {    body { ...
if (navigator.msMaxTouchPoints &&    navigator.msMaxTouchPoints > 1) {    // the users hardware supports touch input}
<input type="email" >
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;Value                               Description  ...
Pointer Event                event.pointerTypevar el = document.getElementById(drawface);// 判斷是否支援 pointer eventif (naviga...
Gesture eventvar el = document.getElementById(drawface);var gesture = new MSGesture();// 加入 pointerel.addEventListener(MSP...
讓您的網站支援觸控操作: http://msdn.microsoft.com/zh-TW/library/ie/jj583807.aspx
釘選網站 (Pinned Site) http://buildmypinnedsite.com/ <meta name="msapplication-TileImage" content="logo.png" > <meta name="msa...
Windows 8 子母畫面 (Snapped view)                                         Full@media screen and (max-width: 400px) {  @-ms-vie...
快速翻頁 (Flip ahead)                                   點擊翻頁鍵、或是從右 swipe 至左<link rel="prev" href="/page/2"><link rel="next" hr...
從 Web 到 App<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content="在市集中的 Package...
http://msdn.microsoft.com/iehttp://blogs.msdn.com/b/iehttp://ietestdrive.com/http://buildmypinnedsite.com
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
Internet Explorer 10: 重新想像網站設計
Upcoming SlideShare
Loading in...5
×

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

821

Published on

Published in: Technology

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

  1. 1. Internet Explorer 10重新想像網站設計
  2. 2. Agenda
  3. 3. 各種 Internet Explorer 10
  4. 4. 使用 HTML5 優化網站效能
  5. 5. 使用 CSS3 優化網站排版或效果顯示
  6. 6. : <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
  7. 7. 根據不同的解析度套用不同的樣式@media (max-width: 480px) { body { padding-top: 70px; }}@media (max-width: 768px) { body { padding-top: 0; }}
  8. 8. if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { // the users hardware supports touch input}
  9. 9. <input type="email" >
  10. 10. -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;Value Description Default value for -ms-touch-action. Browserauto determines.none No default behavior is allowed. Only panning, pinch zoom, and swiping to navigatemanipulation forward or back are allowed.double-tap-zoom Only double-tap zooming is allowed. The element inherits the value of -ms-touch-actioninherit from its parent. 利用觸控方式捲動和縮放: http://msdn.microsoft.com/zh-TW/library/ie/hh920761.aspx
  11. 11. Pointer Event event.pointerTypevar el = document.getElementById(drawface);// 判斷是否支援 pointer eventif (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
  12. 12. Gesture eventvar el = document.getElementById(drawface);var gesture = new MSGesture();// 加入 pointerel.addEventListener(MSPointerDown, function (evt) { gesture.addPointer(evt.pointerId);}, false);// Tap and Holdel.addEventListener(MSGestureTap, handleTap, false);el.addEventListener(MSGestureHold, handleHold, false);// dynamic gesture// 讀取 evt 裡各種位移、旋轉、速度等參數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
  13. 13. 讓您的網站支援觸控操作: http://msdn.microsoft.com/zh-TW/library/ie/jj583807.aspx
  14. 14. 釘選網站 (Pinned Site) http://buildmypinnedsite.com/ <meta name="msapplication-TileImage" content="logo.png" > <meta name="msapplication-TileColor" content="#123456" >
  15. 15. Windows 8 子母畫面 (Snapped view) Full@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; } /* 當 Modern IE10 在貼齊模式時的樣式設定,並且將可視區域設為 320px */ Snap}
  16. 16. 快速翻頁 (Flip ahead) 點擊翻頁鍵、或是從右 swipe 至左<link rel="prev" href="/page/2"><link rel="next" href="/page/4">
  17. 17. 從 Web 到 App<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content="在市集中的 Package 名稱">
  18. 18. http://msdn.microsoft.com/iehttp://blogs.msdn.com/b/iehttp://ietestdrive.com/http://buildmypinnedsite.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×