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

Screen Width Javascript does not work on all Android devices

本文关键字：Android 设备 适用于 不适用 Javascript 屏幕      更新时间：2023-09-26

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

我应用的Javascript代码通常在所有桌面浏览器和iOS浏览器上运行良好。但是，我无法让它适用于所有Android浏览器或设备，除了三星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>

如果您将媒体查询与 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/

相关文章：