• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Internet Explorer 10: 重新想像網站設計
 

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

on

  • 1,086 views

 

Statistics

Views

Total Views
1,086
Views on SlideShare
1,085
Embed Views
1

Actions

Likes
6
Downloads
11
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 { padding-top: 0; }}
    • 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 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
    • 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
    • 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
    • 讓您的網站支援觸控操作: http://msdn.microsoft.com/zh-TW/library/ie/jj583807.aspx
    • 釘選網站 (Pinned Site) http://buildmypinnedsite.com/ <meta name="msapplication-TileImage" content="logo.png" > <meta name="msapplication-TileColor" content="#123456" >
    • Windows 8 子母畫面 (Snapped view) Full@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; } /* 當 Modern IE10 在貼齊模式時的樣式設定,並且將可視區域設為 320px */ Snap}
    • 快速翻頁 (Flip ahead) 點擊翻頁鍵、或是從右 swipe 至左<link rel="prev" href="/page/2"><link rel="next" href="/page/4">
    • 從 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