瀏覽器檢測 - 移動與PC

因此，我已經閱讀了少數關於瀏覽器檢測和功能檢測的主題，我並不完全確定我需要做的事情屬於該討論的範圍。瀏覽器檢測 - 移動與PC

我有一個遊戲網站。人們可以在PC或移動設備上玩遊戲。他們還可以配置他們希望遊戲如何工作。例如，他們可以選擇通過單擊或雙擊來玩卡片。但是，雙擊不是移動設備上的一個選項，因此有些人會遇到問題，因爲他們選擇了該選項，而JavaScript無法正常工作。所以我想，我會讓人們爲移動設備指定一組偏好設置，爲PC設置另一組偏好設置，並且只提供這些設備上可用的選項。然而，我正在閱讀的是，檢測PC與移動設備是一個糟糕的出路。

那麼，如果我是特徵檢測，我究竟在檢測什麼？沒有辦法檢測設備是否特別支持雙擊，是嗎？

來源

2013-12-12 a2zCribbage

在我看來，你的問題是觸摸用戶界面與光標用戶界面，這不一定與移動設備和PC（大概是桌面）相關。也許提供光標（或指點設備）的觸摸和設置的設置，並讓用戶選擇一個或另一個。 – RobG

所以我做到了這一點（理論上聽起來正確），但在實踐中我該如何去做呢？我嘗試使用Modernizr.touch來識別某些瀏覽器是否支持觸摸，並且它不起作用（或者我不期望它如何工作）。 – a2zCribbage

我有一個簡單的觸摸支持功能測試，我會在幾個小時後發佈。 – RobG

您將無法高效地檢測到PC或移動設備訪問您的網站的位置，因爲存在許多設備並且它們不斷變化。唯一的方法是檢查瀏覽器代理字符串，它非常繁瑣;有成千上萬的。此外，它可能被欺騙，所以它不是一個很好的信息來源。你可以做的最好的（這是許多專業人士，包括我）使用的功能檢測技術 - 屏幕分辨率，支持html標籤，支持的CSS屬性等。

一個很好的工具是Modenizr js庫，這是功能並且你可以檢查設備是否支持觸摸事件，如果有，那麼你知道雙擊不會是你的選擇。

下面是一些文檔的鏈接http://modernizr.com/docs/#features-misc

來源

2013-12-12 02:52:36 Leo

如果可以的話，我會投下來，但我沒有聲望。我去了Modernizr，並且實施了觸摸功能檢測，現在我和我的網站在一個非常糟糕的地方。它不工作！有很多人在我的網站上使用計算機，而modernizr則說他們使用的是觸摸式設備，但事實上並非如此。我強烈建議人們避免使用Modernizr進行觸摸檢測！ – a2zCribbage

下面是一個例子。這個瀏覽器/操作系統組合返回「真」的觸摸，但它不是一個觸摸設備（據我所知）:(Windows NT 6。2; WOW64）AppleWebKit/537.36（KHTML，像Gecko）Chrome/31.0.1650.57 Safari/537.36 – a2zCribbage

好吧，公平地說，我猜測Modernizr做的是正確的事情，我只是問了一個錯誤的問題。我認爲（不正確），有觸摸設備意味着你不能使用雙擊。實際上，一些設備支持這兩種設備。我真正應該做的是不檢測觸摸設備（正如本答案所建議的那樣），而是檢測設備是否支持雙擊。這個陳述（以及我的想法呢！）在上面的答案中是不正確的「如果確實如此，那麼你知道雙擊不會成爲你的選擇。」因爲有些設備同時支持。 – a2zCribbage

看來你真的想要做的是測試支持觸控，嘗試Detecting touch: it’s the ‘why’, not the ‘how’。

一個共同的建議是：

if (document && document.element && 'ontouchstart' in document.documentElement) { 
    ... 
}

但是，很可能在某些瀏覽器中失敗。較長的方法，雖然可能沒有更準確，是測試活動的支持直接：

/* Feature tests for TouchEvent and GestureEvent modules 
    * implemented in Mobile Safari on iPhone 
    * 
    * The TouchEvent module is a draft (18/08/2008) that supports: 
    * 
    * touchstart 
    * touchmove 
    * touchend 
    * touchcancel 
    * 
    * The GestureEvent module is a draft (18/08/2008) 
    * that supports: 
    * 
    * gesturestart 
    * gesturechange 
    * gestureend 
    * 
    * The functions require support for try..catch, introduced 
    * in ECMA-262 ed3, JavaScript 1.4 and JScript 5.1.5010. 
    * Equates to Navigator 4.0 or later and IE 5.1 or later 
    * (http://pointedears.de/scripts/es-matrix/) 
    * 
    * If W3C DOM 2 Event document.createEvent is supported, 
    * return either true or false, 
    * otherwise return undefined. 
    */ 
    function touchSupported() { 
    if (document && document.createEvent) { 
     try { 
     document.createEvent('TouchEvent'); 
     return true; 
     } catch (e) { 
     return false; 
     } 
    } 
    } 

    function gestureSupported() { 
    if (document && document.createEvent) { 
     try { 
     document.createEvent('GestureEvent'); 
     return true; 
     } catch (e) { 
     return false; 
     } 
    } 
    }

這是寫在2008年，我才真正用它在Safari和iPhone雖然它似乎在其他地方工作。徹底測試。

來源

2013-12-16 13:49:45 RobG

瀏覽器檢測 - 移動與PC

回答

相關問題