Custom CSS / meta tag for iPad/iPhone

I am working on a web app that uses Extjs components, PHP, and MySQL. I want to correctly display my apps o开发者_JAVA技巧n iPad. Are there special CSS rules or meta tags?

Your question is fairly vague. Here are some tips for developing a web application on iOS:

• For fixed width sites, use a <meta> tag to tell mobile Safari what the width of your site should be, similar to:
  <meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
• You can get a list of other <meta> tags supported by mobile Safari here.
• Mobile Safari adds new events to the JavaScript DOM in order to support touch and orientation change. Here is the Apple reference to them.
• Here's a useful overview of how to make a web app suitable for use on iPad.
• Finally, try a Google search.

I haven't gotten a chance to test it yet, but I wrote this script to fire the contextmenu event on an element after a long press of 1.5 seconds or more. Try it out.

UPDATE: finally got a chance to test it, it works as intended. I lowered the delay from 1500 ms to 1200 ms since the delay seemed too long for my taste.

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