Мысли о jQuery Mobile Smartphone
28.01.2016

При создании сайта адаптированнго под мобильные устройства в APEX 4.2 можно выбрать только одну тему "jQuery Mobile Smartphone".

Тема хорошо проработана для мобильных устройств, и так же сносно смотрится на десктопных системах. Однако выснились некоторые особенности с которыми пришлось столкнуться при разработке сайта на этой теме.

  1. Поля ввода автоматически растягиваютя на всю ширину экрана. Для мобильного устройтва это не плохо, а вот для десктопа смотрится не очень.
  2. Нельзя создать регион с интерактивным отчетом.
  3. При переходе по ссылкам не происходит полной перезагрузки страницы. Однако URL в адресной строке меняется. Это не бага, это фича мобильного интерфейса. Но поскольку я использую ЧПУ адреса мне это мешало. Решилось просто: в шаблоне страницы убрал строчку data-url="#REQUESTED_URL#"
  4. Если на страницах есть JavaScript описанный в разделе "Function and Global Variable Declaration", это код будет выолняться каждый раз при переходе на эту страницу. В случае с обычным десктопным вариантом сайта проблем нет, DOM полностью перестраивается и страница инициализируется заново. Но в случае с мобильным возникает проблема - при повторном входе на страницу она уже есть в DOM (осталась от предыдущего посещения, только скрыта в невидимом div-е, это такая фича темы для мобильных интерфейсов), а вот JavaScript код из раздела "Function and Global Variable Declaration" выполняется повторно. В моем случае там назначались события onclick социальным кнопкам. В результате при клике на социальную кнопку попап окошко для шаринга контента вылазило столько раз, сколько было переходов на текущую страницу. Пришлось событе onclick прописать непосредственно в HTML разметке кнопок.
  5. Метатеги описанные в разделе "HTML Header" при переходе по внутренним ссылкам не изменяются, остаются те, что были на первой странице. Пока изящного и простого решения на нашел, видно надо изучать документацию.

Из всего перечисленного я решил для себя, что нереально создать одинаково красивый и удобный интерфейс под мобильные и десктопные системы используюя одну тему. В будущем буду спользовать темы для дестопных систем, но с некоторой оглядкой на мобильные устройства, в частности на масштаб, т.е. буду добавлять в заголовок такой мета-тэг:

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" name="viewport">

release 1.0