屏幕宽度的Javascript不能在所有的Andr​​oid设备上工作 [英] Screen Width Javascript does not work on all Android devices

问题描述

我新的Javascript编程。基本上，我想替换的文本，当屏幕宽度去900px及以下。由于响应标签中的JavaScript code，我不能使用CSS来隐藏更长的单词。

JavaScript的code我申请，正常工作以及所有桌面浏览器和iOS浏览器。但是，我不能让它从三星Galaxy Tab在所有的Andr​​oid浏览器或设备的工作除了2 10.1。

这是截图：
的http://www.browserstack.com/screenshots/5fed3f8c9c15c542ff10816861954097d2f36d53

以下是JavaScript code。我不知道如果我错过任何东西在这里？

\r

\r

$（文件）。就绪（函数（）{\r
功能checkWidth（）{\r
    如果（$（窗口）.WIDTH（）＆所述; 900）{\r
        $（'li.cvc'）文本（信贷专家VS分数'）。\r
        $（'li.hwh'）文本（'我们如何帮助'）;\r
    }其他{\r
        $（'li.cvc'）文本（信贷专家VS信用评分'）。\r
        $（'li.hwh'）文本（'我们如何帮助人们'）;\r
    }\r
}\r
$（窗口）.resize（checkWidth）;\r
}）;

\r

\r

\r

这是HTML code，以供参考。

\r

\r

＆LT; UL类=RESP的选项卡列表＆GT;\r
        ＆LT;李类=标签页，标题是＆gt;了解有关信用与LT; /李＆GT;\r
        ＆LT;李类=标签标题CVC＆GT;信用报告VS信用评分和LT /李＆GT;\r
        ＆LT;李类=标签标题HWH＆gt;我们如何帮助人们＆LT; /李＆GT;\r
        ＆LT;李类=标签页标题＆GT;公司新闻＆LT; /李＆GT;\r
      ＆LT; / UL＆GT;

\r

\r

\r

解决方案

也许这将是更好，如果你使用与 window.matchMedia 媒体查询。这是一个普通的例子：

 ;（函数（根）{
  使用严格的;  VAR width900;
  VAR DOC = root.document;  功能changeBackground（）{
    如果（this.matches）{
      doc.body.style.backgroundColor =绿色;
    }其他{
      doc.body.style.backgroundColor =白;
    }
  }  如果（root.matchMedia）{
    width900 = root.matchMedia（'（最大宽度：900px）'）;
  }  root.addEventListener（'调整'，函数（E）{
    如果（width900）{
      changeBackground.call（width900）;
    }
  }，FALSE）;
}（本））;
 

对于不支持的浏览器 matchMedia 本机可以使用填充工具：的 https://github.com/paulirish/matchMedia.js

您可以阅读更多关于 matchMedia 在这里：
的https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

I'm new to Javascript programming. Basically, I want to replace the text, when the screen width goes to 900px and below. Due to the Javascript code of the responsive tabs, I cannot use CSS to hide the longer words.

The Javascript code I've applied, normally works well on all desktop browsers and iOS browsers. However, I can't get it to work on all Android browsers or devices apart from Samsung Galaxy Tab 2 10.1.

These are the screenshots: http://www.browserstack.com/screenshots/5fed3f8c9c15c542ff10816861954097d2f36d53

Following is the Javascript code. I'm not sure if I'm missing anything else here?

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

And this is the HTML code for reference.

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

解决方案

Perhaps it would be better if you used media queries with window.matchMedia. Here is a general example:

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

For Browsers that don't support matchMedia natively you can use a polyfill: https://github.com/paulirish/matchMedia.js

You can read more about matchMedia here: https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

这篇关于屏幕宽度的Javascript不能在所有的Andr​​oid设备上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！