Window 调整大小事件能否检测页面加载时的浏览器屏幕宽度？

Question

我正在寻找一个应用于函数的解决方案，以便在加载页面时使用预先检测到的屏幕宽度大小调用它。

我提供了一个演示调整大小事件的片段，但现在我需要弄清楚如何在加载内容之前检测屏幕宽度：

function checkWidth() {
  if ($(window).width() < 600) {
    $('#content').addClass('fulltxt');
    $("#content").each(function(i) {
      len = $(this).text().length;
      if (len > 5) {
        $(this).text($(this).text().substr(0, 5) + '...');
      }
    })
  } else {
    $('#content').removeClass('fulltxt');
    $("#content").each(function(i) {
      $(this).text($(this).data('originaltxt'));
    });
  }
}
$("#content").each(function() {
  $(this).data({
    originaltxt: $(this).text()
  });
});
$(window).resize(checkWidth);

#content {
  border: 2px solid green;
  display: inline-block;
  padding: 5px;
}

#content.fulltxt {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">CONDENSE THIS TEXT</div>

Answer 1

也许我把它弄得比我需要的更复杂了。在大多数情况下，媒体查询似乎可以解决问题：

#content {
  max-width: auto;
  overflow: auto;
  white-space: normal;
  background-color: red;
  display: inline-block;
}

@media only screen and (max-width:600px) {
  #content {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: blue;
  }
}

<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>
<div id="content">CONDENSE THIS TEXT</div>

Window 调整大小事件能否检测页面加载时的浏览器屏幕宽度？

Can a Window Resize Event Detect the Browser Screen Width on Page Load?

javascript

jquery

function

jquery-events