Javascript 用于iPad/iPhone的自定义CSS/meta标记

我正在开发一个使用Extjs组件、PHP和MySQL的web应用程序。

---

我想在iPad上正确显示我的应用程序。是否有特殊的CSS规则或元标记？

您的问题相当模糊。以下是在iOS上开发web应用程序的一些技巧：

• 对于固定宽度的站点，请使用
  标记告知mobile Safari站点的宽度，类似于：
  

• 您可以获得mobile Safari支持的其他
  标签列表
• Mobile Safari向JavaScript DOM添加新事件，以支持触摸和方向更改
• 下面是一个关于如何使web应用程序适合在iPad上使用的示例
• 最后，试试看

---

我还没有机会测试它，但我编写了这个脚本，在长按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);
    });
}
})();

---

尽管如此（完全正确），如果您没有使用库来为您抽象大部分内容，那么您可能做错了。有几种很好的替代方案（包括制作Ext JS的同一个人的Sencha Touch）。问题是，Ext JS是高级桌面应用程序所必需的，而Sencha Touch最适合于专用于移动设备的应用程序。我们需要的是一个在桌面和平板电脑上运行良好的框架，包括下面我的代码这样的特殊适配器，以弥合两个平台功能上的细微差异。也许Ext JS 4将成为该框架，但在此之前，我和其他人（如OP）将不得不依靠黑客攻击Ext JS 3.3来满足我们的需求。谢谢你的代码，我使用grid cellcontextmenu事件，我如何使用你的功能？plz帮助通过查看ExtJS源代码，看起来rowcontextmenu和cellcontextmenu是元素contextmenu事件的结果。所以它应该能起作用。