讓您的網站支援觸控操作

從 Windows 8 開始,Internet Explorer 能夠在網路上執行快速流暢的多點觸控經驗,為基本的觸控互動提供一般的預設處理,像是移動瀏覽 (用於可捲動的區域)、點兩下以及捏合縮放、觸控選取及按住後顯示的內容功能表。本指南提供方便觸控的設計指引以及問題的疑難排解建議,以保證使用觸控功能的使用者能夠更有效率地瀏覽您的網站。

方便觸控的網站設計指導方針

不要隱藏暫留背後的內容

使用觸控方式瀏覽時,沒有等同於使用游標暫留在網頁元素上方的功能。因此,使用觸控方式的使用者可能無法存取透過暫留啟用的任何動作或內容。發生這個問題的常見情形就是使用者想要使用暫留所啟用的子功能表時。為了避免發生這個問題,請不要使用暫留來隱藏使用者可以互動的內容。而是考慮使用 onclick 事件來切換可見度:


<style type="text/css">
    #subMenu {
        display: none;
    }
    #subMenu.showSubMenu {
        display: block;
    }
</style>
...
<script>
    function toggleMenu() {
        var subMenu = document.getElementById("subMenu");
        subMenu.classList.toggle("showSubMenu");
    }
</script>
...
<div id="menu" onclick="toggleMenu()">
    <a>JavaScript Hover Menu</a>
    <div id="subMenu">
        <div class="subMenuItem"> 
            <a>Sub menu item 1</a>
        </div>
        <div class="subMenuItem">
            <a>Sub menu item 2</a>
        </div>
    </div>
</div>


另外,Internet Explorer 10 在現有的 aria-haspopup 屬性新增了新行為,可以模擬游標暫留在含有隱藏的互動式內容的頁面元素上:


<style type="text/css">
    #menu .cssSubMenu {
        display: none;
    }
    #menu:hover .cssSubMenu {
        display: block;
    }
</style>
...
<div id="menu">
    <a aria-haspopup="true">CSS Hover Menu</a>
    <div class="cssSubMenu">
        <a>Sub menu item 1</a>
    </div>
    <div class="cssSubMenu">
        <a>Sub menu item 2</a>
    </div>
    <div class="cssSubMenu">
        <a class="cssSubLink">Sub menu item 3</a>
    </div>
</div>


設定瀏覽器以提供適合您網站的預設觸控行為

使用者應該可以利用觸控方式來移動瀏覽以及縮放網站。因此根據預設值,瀏覽器可以取用觸控移動、捏合以及點兩下,而且不會傳送這些互動的事件。如果您的網站需要為這些互動提供特殊功能,而且您需要接聽構成的指標事件,則可以將 IE 設定成只提供您需要的預設行為 (如果有的話)。您也可以停用 IE 中其他預設觸控處理,像是文字選取及叫用操作功能表。如需詳細資訊,請參閱不只是了解基礎資訊

使用可捲動的區域來實作移動瀏覽經驗

開發人員有時候可以利用指令碼以及事件來模擬移動瀏覽,藉以實作「平移」經驗。不過,這樣在操作的時候會感到動作反應變慢,影響效能。 您如果使用溢位來建立可捲動的區域,Internet Explorer 10 會透過硬體加速移動瀏覽和縮放速度,提供您隨心所欲的流暢觸控經驗。Internet Explorer 10 可以讓您更進一步自訂移動瀏覽和縮放經驗。例如,您可以建立讓使用者手指撥動就能翻頁瀏覽的分頁內容。然後您可以在 CSS 中設定「貼齊點」,藉以識別頁面的界限,以便讓 Internet Explorer 10 貼齊使用者的移動瀏覽:


    <style>
        #imagePanner {
            -ms-scroll-snap-type: mandatory;
            -ms-scroll-snap-points-x: snapInterval(0%, 100%);
            overflow-x: auto;
            overflow-y: hidden;
            width: 480px;
            height: 270px;
        }
        .imageRow {
            width: 2400px;
            height: 270px;
        }
        img {
            width: 480px;
            height: 270px;
        }
    </style><div id="imagePanner">
        <div class="imageRow">
            <img alt="Cliff" src="images/Cliff.jpg" />
            <img alt="Grapes" src="images/Grapes.jpg" />
            <img alt="Rainier" src="images/Rainier.jpg" />
            <img alt="Sunset" src="images/Sunset.jpg" />
            <img alt="Valley" src="images/Valley.jpg" />
        </div>
    </div>


如需使用貼齊點的詳細資訊,請參閱利用觸控輸入進行捲動、移動瀏覽以及縮放的範例

使用 HTML5 表單識別輸入類型

Internet Explorer 10 引入了 HTML5 輸入控制項的支援,而且這些控制項都經過觸控最佳化。在文字輸入方面,您可以在適用時識別特定輸入類型,進一步改善使用者的觸控經驗。Internet Explorer 會為 Windows 8 的輸入類型顯示精心打造的觸控式鍵盤配置。

觸控式鍵盤顯示 @.com 按鍵,用於輸入電子郵件地址:


<input type="email">

用於輸入電子郵件地址的 Windows 8 螢幕小鍵盤

觸控式鍵盤顯示數字鍵,用於輸入電話號碼:


<input type="tel">

用於輸入電話號碼的 Windows 8 螢幕小鍵盤

觸控式鍵盤顯示斜線和 .com,用於輸入 URL:


<input type="url">

用於輸入 URL 的 Windows 8 螢幕小鍵盤

提供足夠空間給使用者手指操作

為了建立 Windows 8 觸控優先的使用經驗,我們做了很多研究,從中整理出一些十分有用的觸控互動設計指導方針。手指的平均寬度是 11 公釐。手指所點選目標的越大,誤觸的失誤率就會大幅下降。

在理想情況,目標至少需為 7 公釐 (約 40px) 的方形,而目標周圍填補至少要有 2 公釐 (約 10px)。

如果您只想為使用觸控硬體的使用者調整間距,請使用功能偵測。若要偵測使用者是否具備觸控硬體,請使用:


if (navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}


控制預設觸控經驗

在 Windows 8 和更新版本上,IE 提供一般觸控互動的預設處理,包括:

  • 可捲動區域的移動瀏覽
  • 捏合縮放
  • 按住不放操作功能表
  • 文字選取
  • 暫留 (IE11 中新增功能)
  • 拖放 (IE11 中新增功能)

這些功能會自動運作,而網站與應用程式可藉此自然地提供出色的觸控使用經驗。不過,您可能會根據自己的經驗來關閉這些功能。

移動瀏覽和縮放

執行移動瀏覽或縮放時不會觸發指標事件。您可以使用 touch-action CSS 屬性控制或停用瀏覽器的預設行為。

touch-action 值說明
auto初始值。瀏覽器會判定元素的行為。
none元素不允許預設的觸控行為。
pan-x元素允許沿著水平軸以觸控方式移動。
pan-y元素允許沿著垂直軸以觸控方式移動。
pinch-zoom元素允許捏合縮放。
manipulation元素允許以觸控方式移動和兩指捏合張開方式縮放內容。(用速記方式可寫成「x 軸移動瀏覽、y 軸移動瀏覽、兩指捏合張開縮放」)。
double-tap-zoom元素允許點兩下縮放內容。
cross-slide-x 元素允許沿著水平軸交叉滑動。
cross-slide-y元素允許沿著垂直軸交叉滑動。

 

例如,某畫布繪圖應用程式可能會使用:


canvas {
    touch-action: double-tap-zoom;
}


使用者可以利用這個設定,用點兩下的方式就可以放大 canvas 元素,但是手指在 canvas 元素上滑動將會傳送事件給該元素,而非移動瀏覽頁面。

觸控選取

在 Internet Explorer 10 中,點選文字或文字附近即可透過觸控功能來選取文字。如果您要停用文字選取,其方式和您在 Windows Internet Explorer 9 進行的方式完全相同。


element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
 // Disables selection


操作功能表

按住不放 Windows Internet Explorer 中的某些元素會出現一個按住的提示影像,指示即將顯示操作功能表。如果提起手指,則會顯示操作功能表。如果以手指拖曳移開後,視覺影像會消失,而且不會顯示操作功能表。

如果想要使用自己的操作功能表,在 Internet Explorer 10 中也可以做到。只要在 contextmenu 事件呼叫 event.preventDefault,然後執行程式碼以顯示您的內容功能表即可。Internet Explorer 會自動將您的操作功能表與觸控功能搭配,並在按住不放時提供相同的提示視覺影像。下列範例使用 contextmenu 事件來偵測使用者何時按住不放和放開元素。當使用者提起手指時,會觸發 contextmenu 事件,然後顯示訊息。


  <div id="touchspot">Press and hold here</div>

  <script>
    var elm = document.getElementById("touchspot");

    elm.addEventListener("contextmenu", function (e) {
      e.target.innerHTML = "Show a custom menu instead of the default context menu";
      e.preventDefault();    // Disables system menu
    }, false);

  </script>

如果您完全不想使用操作功能表 (例如,在需要使用者暫時按下手指一會兒的遊戲),您也可以停用預設操作功能表及提示視覺影像。若要這樣做,您只需要取消兩個事件。



 // Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
 

不只是了解基礎資訊

當您準備好針對觸控功能來最佳化您的網站,但又想提供流暢的滑鼠和鍵盤支援時,請參閱下列 IE 提供的彈性輸入處理功能:

指標事件

指標事件是以傳統滑鼠事件為模型,但是它們擷取指標的抽象概念套用所有使用者輸入形式,包括滑鼠、觸控和手寫筆。

手勢事件

手勢事件搭配指標事件使用,可讓您的程式碼辨識並回應更複雜的互動,例如捏合、旋轉、撥動和拖曳。

操作事件

如果您要在網站或使用 JavaScript 的 Windows 市集應用程式中使用單層瀏覽系統,也就是使用者在單一頁面上移動瀏覽,和/或瀏覽位於網站相同階層的頁面,您可以接聽操作事件來實作選取、啟動以及拖曳功能表項目元素的交叉滑動使用者互動模式。

利用觸控功能捲動和縮放的 CSS 屬性以及 msZoomTo 方法

適用於微調輸入處理的 CSS 屬性可讓您建立捲動 / 移動瀏覽貼齊點、設定捲動和縮放限制、控制從子項元素到父系元素的縮放鏈結,以及停用以任何方向任意觸控移動瀏覽的捲動軌跡。msZoomTo 方法使用動畫將元素捲動和/或縮放到它的指定座標。

疑難排解觸控問題

如何讓觸控功能使用暫留功能表?

滑鼠可以暫留在內容上 (指向內容),而不會啟用內容 (按一下內容)。然而,觸控點選一下就等於是同時執行游標暫留以及啟用。所以需要暫留又不要啟用內容的功能將不適用於觸控使用者。反之您可以考慮使用 onclick 事件來切換可見度,讓所有行為變成以按一下 (點選) 為基礎。如需詳細資訊,請參閱不要隱藏暫留背後的內容設計指導方針。

如何提供點兩下的自訂使用經驗?

IE 為基本的觸控互動提供一般的預設處理,例如移動瀏覽 (用於可捲動的區域)、點兩下以及捏合縮放內容。您可以使用 touch-action CSS 屬性覆寫這些預設值,然後指定您網站允許的觸控動作行為。如果您想在指定的元素上提供點兩下的自訂行為,只要簡單地省略來自規則的值,就可以停用預設的點兩下縮放行為。例如,下列樣式宣告允許移動瀏覽和捏合縮放,但是會停用點兩下縮放:


touch-action: manipulation;

如何偵測觸控動作的拖曳行為?

Internet Explorer 11 引進觸控型 HTML5 拖放的原生支援。若要使用 Internet Explorer 10 偵測您網站上的拖曳動作,請接聽 按住 (MSGestureHold) 和撥動 (MSGestureStartMSGestureChangeMSGestureEnd) 的手勢事件。

觸控時為何看不到指標移動?

因為 IE 為基本的觸控互動提供一般的預設處理,所以根據預設,它可以取用觸控移動、捏合以及點兩下,而且不會傳送這些互動的事件。如果您的網站需要為這些互動提供特殊功能和 (或) 接聽構成的指標事件,您可以使用 touch-action 屬性來停用特定觸控行為的預設處理。如需詳細資訊,請參閱設定瀏覽器以提供適合您網站的預設觸控行為

相關主題

設計適合 Windows 8 不同裝置的彈性網站

 

 

顯示:
© 2014 Microsoft