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

【问题标题】：Detecting and changing via screen width is not working通过屏幕宽度检测和更改不起作用
【发布时间】：2017-11-15 22:02:42
【问题描述】：

所以，我查看了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");
}

有什么想法吗？

【问题讨论】：

如果您所做的只是隐藏/显示元素，则无需 javascript。使用 CSS 媒体查询
回显@charlietfl，这正是 CSS Media Queries 的用途。它们消除了对脚本的需求并且更加高效。

标签： javascript jquery html screen-resolution

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案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"; }
    }

&lt;p&gt;&lt;/p&gt;

【讨论】：