Your SlideShare is downloading. ×
  • Like
Internet Explorer 10: 重新想像網站設計
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 629 views
Published

 

Published 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
629
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
13
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