Какой лучший способ переключения между jQuery UI и jQuery Mobile

Я хочу, чтобы на одном сайте использовался один и тот же HTML-код, но "виджетизировал" его наилучшим образом для платформы, на которой он служил.

Существует ли стандартная практика обнаружения функций мобильных устройств/аппаратных клавиатур на клиенте и принятия решения о загрузке jQuery Mobile вместе с мобильным JavaScript-интерфейсом сайта или jQuery-интерфейсом сайта и script для работы на рабочем столе?

Следующее выглядит как разумный способ сделать это, но мне интересно, является ли Modernizr.touch лучшим способом обнаружить это? Например: Принудительное касание не может быть лучшим решением для поверхности. Есть ли способ обнаружить, есть ли также аппаратная клавиатура?

Modernizr.load({
  test: Modernizr.touch,
  yep : ['jquery-mobile.js','mobile.js']
  nope: ['jquery-ui.js','desktop.js']
});

Edit:

Найденные соответствующие ошибки Modernizr:

Я предполагаю, что мне действительно нужно определить, как устройство способно касаться, и если у него есть аппаратная клавиатура. Я мог бы использовать ответ Дэвида Малдера для определения ширины устройства в физических единицах (дюймах) в качестве прокси-сервера для этого и предположить, что на что-нибудь > 11 дюймов есть клавиатура, но я уверен, что есть (или Google выпустит планшет Nexus 12), где это сделало бы неправильное предположение.

Ответы

Ответ 1

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

DPI не может быть рассчитан прямо из JS, но

var dpi = 50;
while(window.matchMedia("(min-resolution: "+dpi+"dpi)").matches && dpi<500){
  dpi+=1;
}

что позволяет нам вычислить диагональ экрана, подобную этой

var screendiagonal = Math.round(Math.sqrt(Math.pow(window.screen.availHeight,2)+Math.pow(window.screen.availWidth,2))/dpi)

if (screendiagonal < 4) "phone"
else if (screendiagonal < 11) "tablet"
else "computer"

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

О, и хорошо отметить, что это не будет работать на настольных компьютерах, поэтому необходимо провести дополнительную проверку, будет ли конечный dpi равным 500, в этом случае это настольная система (хотя для этого также может быть рассмотрен userAgent), Кроме того, может потребоваться выяснить значение -webkit-min-device-pixel-ratio, чтобы включить это в вычисление (просто переверните его, пока не найдете правильное соотношение и не умножьте dpi на это отношение).

Ответ 2

Если вы не состоите в браке с jQuery UI и jQuery Mobile, тогда Twitter Bootstrap. Макетная карта делает довольно хорошую работу w/o необходимость изменения HTML или CSS для разных устройств. Вы можете легко это увидеть, перейдя на сайт Twitter Bootstrap и изменив размер вашего браузера на разные размеры.

В общем, ваш взгляд на то, что называется отзывчивым дизайном. Его основаны на запросах на CSS-запросы и небольшом Javascript, как правило, для массажа дерьма, который является IE < 9 для правильной визуализации. Другая причина, по которой мне нравится бутстрап, это то, что у него есть гигантское сообщество, управляющее этим "массированием" новых устройств вместо вас.

Ответ 4

Самый простой способ - обнаружить пользовательские агенты, которых вы хотите настроить, и загрузить соответствующий javascript.

function load(src) {
  var doc = document,
    application = doc.createElement('script'),
    script = doc.getElementsByTagName('script')[0];
  application.type = 'text/javascript';
  application.async = true;
  application.src = src;
  script.parentNode.insertBefore(application, script);
}
load(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|iemobile|tablet|Opera Mobi/i.test(navigator.userAgent) ? 'handheld.js' : 'desktop.js');

Лучше и более дорогостоящим способом разрешить бэкэнд справиться с этим, используя wurl для согласования контента, чтобы обслуживать надлежащие (javascript) активы для рабочего стола или карманные устройства (проверьте для is_wireless_device = true для карманных компьютеров).