Как протестировать мобильный веб-сайт

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

Для этого я намерен использовать modernizr2 для тестирования функций и загрузки только необходимых файлов и библиотек.

На стороне javascript мне очень интересно использовать что-то вроде zepto.js(http://zeptojs.com/), которая представляет собой крошечную библиотеку javascript (2-5k), оптимизированный для мобильного webkit (и только для мобильного webkit) при сохранении синтаксиса, совместимого с jquery. Он также был разработан для "горячей замены" с полным jQuery. Поэтому моя стратегия (в псевдокоде):

  • Тест для мобильного webkit
  • Если (true) загрузить zepto.js
  • if (false) load jquery

Но теперь мой вопрос: что (будущее доказательство) техника вы бы рекомендовали для обнаружения мобильного веб-кита, желательно с использованием чистого javascript (без использования jquery, плагинов или других библиотек) и который можно было бы интегрировать с API тестирования modernizr?

ОТВЕТЫ

Ответ 1

Хорошо, поэтому я думаю, что мой вопрос был плохо сформулирован или что-то в этом роде, но немного копался, и я нашел приемлемое решение, которое работает с моим прецедентом.

// Webkit detection script
Modernizr.addTest('webkit', function(){
return RegExp(" AppleWebKit/").test(navigator.userAgent);
});

// Mobile Webkit
Modernizr.addTest('mobile', function(){
return RegExp(" Mobile/").test(navigator.userAgent);
});

Эти два теста добавят классы "webkit" и "mobile" в ваш тег html (или "no-webkit" и "no-mobile", если это неверно), но также позволит вам условно загрузить вашу предпочтительную библиотеку javascript, в зависимости от ситуации.

В моем случае либо переключение между JQuery или Zepto.js:

Modernizr.load([
            // test mobile webkit (zepto or jquery?)
            {
                test: Modernizr.webkit && Modernizr.mobile,
                nope: ['//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'],
                yep: [baseURL + 'js/lib/zepto.min.js']
            }]);

Поэтому, когда я обнаруживаю, что посетитель использует браузер mobile-webkit (что, вероятно, похоже на 100% устройств iOS или Android), я могу сэкономить на них немалые накладные расходы и загрузить обычный JQuery для всех остальных, если необходимо. Поскольку синтаксис настолько схож, плагины и другие скрипты, скорее всего, будут работать независимо от того, какая структура загружается.

Ответ 2

gillesv ответ почти спот-он. Однако я обнаружил, что Regex не обнаруживает браузеры Webkit на Android 2.2 и 2.3 (Froyo и Gingerbread). UserAgent содержит как фразы "AppleWebkit", так и "Mobile", но не с косой чертой в конце.

Изменение кода следующим образом работает для меня:

// Webkit detection script
Modernizr.addTest('webkit', function(){
  return RegExp(" AppleWebKit").test(navigator.userAgent);
});

// Mobile Webkit
Modernizr.addTest('mobile', function(){
  return RegExp(" Mobile").test(navigator.userAgent);
});