Пользовательский CSS / метатег для iPad / iPhone

Question

Я работаю над веб-приложением, использующим компоненты Extjs, PHP и MySQL.Я хочу правильно отображать свои приложения на iPad.Существуют ли специальные правила CSS или метатеги?

Answer 1

Ваш вопрос довольно расплывчатый.Вот несколько советов по разработке веб-приложения для iOS:

• Для сайтов фиксированной ширины используйте тег <meta>, чтобы сообщить мобильному Safari, какой должна быть ширина вашего сайта, например:
  <meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
• Здесь вы можете получить список других тегов <meta>, поддерживаемых мобильным Safari .
• Mobile Safari добавляет новые события в DOM JavaScript по порядкуподдерживать касание и изменение ориентации. Вот ссылка Apple на них.
• Вот полезный обзор того, как сделать веб-приложение пригодным для использования на iPad.
• Наконецпопробуйте поиск в Google .

Answer 2

У меня еще не было возможности протестировать его, но я написал этот скрипт для запуска события 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);
    });
}
})();