Question

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

Answer 1

你的问题相当含糊。以下是在iOS上开发Web应用程序的一些提示：

对于固定宽度的网站，请使用<meta>标记告诉移动版Safari您网站的宽度应该是多少，类似于：
<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
您可以获取移动版Safari here.

<meta>

Mobile Safari将新事件添加到JavaScript DOM，以支持触摸和方向更改。 Here is the Apple reference to them.
以下是useful overview如何制作适合在iPad上使用的网络应用。
最后，尝试Google search。

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);
    });
}
})();

适用于iPad / iPhone的自定义CSS /元标记

2 个答案: