通过屏幕宽度检测和更改不起作用

Question

因此，我检查了 Do something if screen width is less than 960 px 以了解在屏幕尺寸小于 960 px 时如何执行某些操作。但是，它对我不起作用。他们的回答是：

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

我试过了，确实有效。我也已经有一个 alert 告诉我屏幕尺寸；

var size = $(window).width();
alert(size);

这行得通，但这行不通：

if (size < 1200) {
    $("#mobileVersionDetected").css("display", "block");
}
else {
    $("#mobileVersionDetected").css("display", "none");
}

有什么想法吗？

Answer 1

试试这个：

if (size < 1200) {
    $('#mobileVersionDetected').attr("style", "display: block");
}
else {
    $('#mobileVersionDetected').attr("style", "display: none");
}

Answer 2

如果我将 $(window).width() 添加到实际的 if function 而不是使用 variable 它就可以了。

Answer 3

为了回应@charlietfl，这正是 CSS Media Queries 的目的。它们消除了对脚本的需求并且效率更高。

    /* Baseline styles applied initially: */
    body { background-color: #b200ff; /* purple */ }

    p    { 
      border:1px solid black; 
      background: white; 
      padding:5px; 
      text-align:center; 
      font:bold 1.2em Arial;

    }

    /* 
       When writing multiple media queries that don't explicitly
       specify a range, the order of the queries matter!!!

       For example:

          With a viewport of 400px wide, both of the the following 
          two queries would apply:

           @media screen and (max-width:400px) {...}
           @media screen and (max-width:600px) {...}

      So, the last one would be used. 
    */

    /*
       Note that this query uses "min-width", 
       not "max-width" so that it handles
       all viewports bigger than 1200       
    */
    @media screen and (min-width: 1201px) {
      body { background-color: orange; }
      p:after { content: "over 1200px"; }
    }

    /* 
       Here, we're using "max-width" to handle
       viewports up to the specified sizes:
    */
    @media screen and (max-width: 1200px) {
      body { background-color: yellow; }
      p:after { content: "961px to 1200px"; }
    }

    @media screen and (max-width: 960px) {
      body { background-color: blue; }
      p:after { content: "769px to 960px"; }
    }

    @media screen and (max-width: 768px) {
      body { background-color: grey; }
      p:after { content: "551px to 768px"; }
    }

    @media screen and (max-width: 550px) {
      body { background-color: green; }
      p:after { content: "321px to 550px"; }
    }

    @media screen and (max-width:320px) {
      body { background-color: red; }
      p:after { content: "up to 320px wide"; }
    }

<p></p>

通过屏幕宽度检测和更改不起作用

Detecting and changing via screen width is not working

html

javascript

jquery

screen-resolution