2011-12-22 181 views
2

我正在使用Scott Hanselman的MobileViewEngines describe here和瀏覽器數據庫51Degrees.mobi爲移動和桌面瀏覽器呈現不同的視圖。如何使用51degrees.mobi檢測觸摸屏移動設備

我現在想添加一箇中間地帶。對於高端移動瀏覽器(蘋果,安卓,windows phone,一些黑莓等)。我正在考慮使用觸摸屏來區分這一類別。

於是,兩個問題:

  1. 如何使用51Degrees.mobi檢測觸摸屏?
  2. 觸摸輸入是一個好方法嗎? (我需要臺式機,高端,低端類)

回答

2

我在51Degrees.mobi工作增加了良好的觸摸檢測。如果設備是使用Request.Browser["IsTouchScreen"]

但是觸摸屏,使用典雅的內部MVC是更復雜一點,你可以檢測。通過觀察MobileCapableViewEngine的源頭好像你可以通過複製移動引擎和改變FindView方法使一個新的引擎:

public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, 
               string masterName, bool useCache) 
    { 
     string overrideViewName = controllerContext.HttpContext.Request.Browser["IsTouchScreen"] == "True" 
             ? viewName + ".Touch" 
             : viewName; 
     ViewEngineResult result = NewFindView(controllerContext, overrideViewName, masterName, useCache); 

     // If we're looking for a Touch view and couldn't find it try again without modifying the viewname 
     if (overrideViewName.Contains(".Touch") && (result == null || result.View == null)) 
     { 
      result = NewFindView(controllerContext, viewName, masterName, useCache); 
     } 
     return result; 
    } 

那麼這個新的引擎將需要添加到移動引擎啓動捆紮機和創建觸摸視圖。

之前,雖然這樣做,你應該想想,如果這是你要如何單獨的設備。例如,諾基亞X3-02有一個相對較小的屏幕,但會呈現與iPad類似的視圖。也許你應該考慮使用設備的操作系統,即Request.Browser["PlatformName"]

最後,51Degrees.mobi Foundation第2版引入了我們自己的設備數據,它使用了前一個設備的不同功能名稱。你可以閱讀mroe關於它在51Degrees.mobi

+0

不適用於任何Android設備,帶觸摸屏的Windows 7筆記本電腦不工作,要麼:( – 2013-07-25 17:03:23

+0

的屬性不再的Request.Browser [「IsTouchScreen」]但是現在[「HasTouchScreen」],而不是在他們的精簡版,免費版提供。 – 2015-06-07 11:52:34

1

大多數觸摸檢測都是用Javascript完成的。或者是CSS。

Modernizr是一個很好用的庫,我認爲它默認帶有MVC3。

你會這麼像這樣:

html.touch div { 
    width: 480px; 
} 

html.no-touch div { 
    width: auto; 
} 

對於檢測的例子,看到this

也許你可以看看MVC4嗎?他們的主要觀點之一是更好的移動支持。 Read here。也許有一些默認

+0

有很多JavaScript的可能性在這裏http://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript – 2015-06-04 11:41:38