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

  • 611 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
611
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
11
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Internet Explorer 10重新想像網站設計
  • 2. Agenda
  • 3. 各種 Internet Explorer 10
  • 4. 使用 HTML5 優化網站效能
  • 5. 使用 CSS3 優化網站排版或效果顯示
  • 6. : <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
  • 7. 根據不同的解析度套用不同的樣式@media (max-width: 480px) { body { padding-top: 70px; }}@media (max-width: 768px) { body { padding-top: 0; }}
  • 8. if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { // the users hardware supports touch input}
  • 9. <input type="email" >
  • 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. 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. 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. 讓您的網站支援觸控操作: http://msdn.microsoft.com/zh-TW/library/ie/jj583807.aspx
  • 14. 釘選網站 (Pinned Site) http://buildmypinnedsite.com/ <meta name="msapplication-TileImage" content="logo.png" > <meta name="msapplication-TileColor" content="#123456" >
  • 15. Windows 8 子母畫面 (Snapped view) Full@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; } /* 當 Modern IE10 在貼齊模式時的樣式設定,並且將可視區域設為 320px */ Snap}
  • 16. 快速翻頁 (Flip ahead) 點擊翻頁鍵、或是從右 swipe 至左<link rel="prev" href="/page/2"><link rel="next" href="/page/4">
  • 17. 從 Web 到 App<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content="在市集中的 Package 名稱">
  • 18. http://msdn.microsoft.com/iehttp://blogs.msdn.com/b/iehttp://ietestdrive.com/http://buildmypinnedsite.com