Custom CSS / Meta Tag for iPad / iPhone

Question

I am working on a web application that uses Extjs, PHP and MySQL components. I want to display my applications correctly on the iPad. Are there special CSS rules or meta tags?

Answer 1

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

• For fixed-width sites, use the tag <meta>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 tags <meta>supported by mobile Safari here.
• Mobile Safari DOM JavaScript, . Apple .
• , - iPad.
• , Google.

Answer 2

, script contextmenu 1,5 . .

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