Как протестировать мобильный webkit - PullRequest
Новая
       21

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

6 голосов
/ 05 июля 2011

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

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

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

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

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

Ответы [ 2 ]

11 голосов
/ 06 июля 2011

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

// 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', если false), но также позволит вам условно загрузить предпочитаемую библиотеку 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 голосов
/ 14 января 2013

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