2010-11-30 65 views

回答

4

你的問題相當含糊。這裏有一些提示用於開發iOS上的Web應用程序:

  • 對於固定寬度的網站,使用<meta>標籤,告訴移動Safari瀏覽您的網站的寬度應該是什麼,類似於:
    <meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
  • 你可以獲得移動Safari支持的其他<meta>標籤的列表here.
  • Mobile Safari向JavaScript DOM添加新事件以支持觸摸和方向更改。 Here is the Apple reference to them.
  • 這是一個useful overview如何製作適用於iPad的網絡應用程序。
  • 最後,嘗試Google search
+1

如果你沒有使用庫來爲你抽象出大部分內容,那麼你可能會做錯了。有幾個很好的選擇(包括讓Ext JS的同一個人的Sencha Touch)。 – 2010-11-30 21:33:08

+0

問題是花式桌面應用程序需要Ext JS,而Sencha Touch最適合專用於移動設備的應用程序。我們需要的是一個在臺式機和平板電腦上運行良好的框架,其中包括特殊的適配器,例如我的代碼,以彌補這兩種平臺功能的細微差異。也許Ext JS 4將會是這個框架,但是在那之前,我和其他像OP一樣,將不得不依靠黑客攻擊Ext JS 3.3來滿足我們的需求。 – divestoclimb 2010-12-01 16:17:51

1

我還沒有機會測試它,但我編寫了這個腳本來在1.5秒或更長時間的長按之後觸發元素上的contextmenu事件。試試看。

更新:終於有機會測試它,它按預期工作。我將延遲從1500毫秒降低到1200毫秒,因爲延遲對我來說太長了。

(function() { 
var EM = Ext.EventManager, 
    body = document.body, 
    activeTouches = {}, 
    onTouchStart = function(e, t) { 
    var be = e.browserEvent; 
    Ext.id(t); 
    if(be.touches.length === 1) { 
     activeTouches[t.id] = fireContextMenu.defer(1200, null, [e, t]); 
    } else { 
     cancelContextMenu(e, t); 
    } 
    }, 
    fireContextMenu = function(e, t) { 
    var touch = e.browserEvent.touches[0]; 
    var me = document.createEvent("MouseEvents"); 
    me.initMouseEvent("contextmenu", true, true, window, 
     1, // detail 
     touch.screenX, 
     touch.screenY, 
     touch.clientX, 
     touch.clientY, 
     false, false, false, false, // key modifiers 
     2, // button 
     null // relatedTarget 
    ); 
    t.dispatchEvent(me); 
    }, 
    cancelContextMenu = function(e, t) { 
    clearTimeout(activeTouches[t.id]); 
    }; 
if(navigator.userAgent.match(/iPad/i) != null) { 
    Ext.onReady(function() { 
     EM.on(body, "touchstart", onTouchStart); 
     EM.on(body, "touchmove", cancelContextMenu); 
     EM.on(body, "touchend", cancelContextMenu); 
    }); 
} 
})();