Ширина экрана Javascript не работает на всех устройствах Android

Question

Я новичок в программировании на Javascript. В принципе, я хочу заменить текст, когда ширина экрана составляет 900 пикселей и ниже. Из-за кода Javascript ответных вкладок я не могу использовать CSS, чтобы скрыть более длинные слова.

Код Javascript, который я применил, обычно хорошо работает на всех настольных браузерах и браузерах iOS. Тем не менее, я не могу заставить его работать на всех Android-браузерах или устройствах, кроме Samsung Galaxy Tab 2 10.1.

Эти скриншоты: http://www.browserstack.com/screenshots/5fed3f8c9c15c542ff10816861954097d2f36d53

Ниже приводится код Javascript. Я не уверен, что мне здесь что-то не хватает?

$(document).ready(function(){ 
 
function checkWidth() { 
 
    if ($(window).width() < 900) { 
 
     $('li.cvc').text('Credit Expert vs Score'); 
 
     $('li.hwh').text('How we help'); 
 
    } else { 
 
     $('li.cvc').text('Credit Expert vs Credit Score'); 
 
     $('li.hwh').text('How we help people'); 
 
    } 
 
} 
 
$(window).resize(checkWidth); 
 
});

И это HTML-код для справки.

 <ul class="resp-tabs-list"> 
 
     <li class="tab-title">Learn about credit</li> 
 
     <li class="tab-title cvc">Credit Report vs Credit Score</li> 
 
     <li class="tab-title hwh">How we help people</li> 
 
     <li class="tab-title">Company news</li> 
 
     </ul>

Answer 1

Возможно, было бы лучше, если бы вы использовали медиа-запросы с window.matchMedia. Вот общий пример:

;(function(root) { 
    'use strict'; 

    var width900; 
    var doc = root.document; 

    function changeBackground() { 
    if(this.matches) { 
     doc.body.style.backgroundColor = 'green'; 
    } else { 
     doc.body.style.backgroundColor = 'white'; 
    } 
    } 

    if(root.matchMedia) { 
    width900 = root.matchMedia('(max-width: 900px)'); 
    } 

    root.addEventListener('resize', function(e) { 
    if(width900) { 
     changeBackground.call(width900); 
    } 
    }, false); 
}(this)); 

Для браузеров, которые не поддерживают matchMedia изначально вы можете использовать polyfill: https://github.com/paulirish/matchMedia.js

Вы можете прочитать больше о matchMedia здесь: https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/