iPad/iPhone的自定义CSS /元标记

Question

我正在开发一个使用Extjs组件、PHP和MySQL的Web应用程序。我希望在iPad上正确显示我的应用程序。是否有特殊的CSS规则或meta标签？

- cranberies

Answer 1

您的问题比较模糊。以下是一些在iOS上开发Web应用程序的提示：

• 对于固定宽度的网站，请使用<meta>标签告诉移动Safari您的网站应该是多宽，类似于：
  <meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
• 您可以获取其他受移动Safari支持的<meta>标签列表在这里。
• 移动Safari添加了新事件到JavaScript DOM以支持触摸和方向改变。这里是苹果的参考文献。
• 这是一个有用的概述如何使适合iPad使用的Web应用程序。
• 最后，尝试谷歌搜索。

- Jeremy Fuller

---

所有这些（完全有效）的内容都已经说过了，如果你没有使用库来为你抽象出大部分内容，那么你可能做错了。有几个很好的选择（包括由制作 Ext JS 的同一组织开发的 Sencha Touch）。 - Brian Moeskau

问题在于，华丽的桌面应用程序需要使用Ext JS，而Sencha Touch最适合专门为移动设备设计的应用程序。所需的是一个在桌面和平板电脑上都能很好地工作的框架，包括像下面我代码中的特殊适配器，以弥合两个平台能力上的小差异。也许Ext JS 4将成为这个框架，但在那之前，我和其他像OP一样的人将不得不依靠黑客手段来修改Ext JS 3.3以满足我们的需求。 - divestoclimb

Answer 2

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

- divestoclimb

---

谢谢你提供的代码，我使用了网格单元格上下文菜单事件，如何在你的函数中实现它？请帮忙。 - cranberies

从查看 Ext JS 源代码来看，rowcontextmenu 和 cellcontextmenu 似乎是作为元素的 contextmenu 事件的结果而触发的事件。因此它应该可以正常工作。 - divestoclimb