Question

我是Javascript编程的新手。基本上，当屏幕宽度达到900px及以下时，我想替换文本。由于响应选项卡的Javascript代码，我不能使用CSS来隐藏更长的单词。

我已应用的Javascript代码通常适用于所有桌面浏览器和iOS浏览器。但是，除了三星Galaxy Tab 2 10.1之外，我无法在所有Android浏览器或设备上运行。

以下是截图： http://www.browserstack.com/screenshots/5fed3f8c9c15c542ff10816861954097d2f36d53

以下是Javascript代码。我不确定我是否遗漏了其他任何东西？

＆＃13;

$(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);
});

＆＃13;

这是HTML代码供参考。

＆＃13;

      <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>

＆＃13;

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/

屏幕宽度Javascript不适用于所有Android设备

1 个答案: