Question

我有一些jQuery代码来动态检查屏幕大小，它就像这样......

$(window).resize(function() {
  windowsize2 = $(window).height();
  windowW = $(window).width();
  if (windowsize2 < 400) {
  ...
  ...

代码的目的是在屏幕变小时调整特定div的大小。这样做有效，但仅当屏幕大于400时才缩小到400以下。

但是，让我们说用户打开我的网站，屏幕大小为< 400，在这种情况下，上面的代码不会读取屏幕大小，因此不会调整div的大小。只有在用户调整屏幕大小时才会这样做。

如果用户打开屏幕高度为< 400的网站，如何使用jQuery来确保调整div的大小？

Answer 1

如果用户打开屏幕高度为＆lt;的屏幕高度，我怎样才能使用jQuery来确保div的大小调整？ 400？

您可以将代码重构为方法，并在两者调整大小并在页面加载后调用该方法。

将您的代码重构为：

function resizeDiv() {
    windowsize2 = $(window).height();
    windowW = $(window).width();
    if (windowsize2 < 400) {
   ...
   ...
}

然后，根据您的使用情况，在页面加载时调用方法有两个选项：

1。您可以使用document.ready：

$( document ).ready(function() {
    resizeDiv();
});

$(document).ready()中包含的代码只有在DOM准备好执行JavaScript代码后才会运行。

2。您可以使用window.load

$( window ).load()中包含的代码将在整个页面（图片或iframe）（而不仅仅是DOM）准备就绪后运行。

$( window ).load(function() { 
    resizeDiv();
});

通常，没有必要等待所有图像完全加载。如果代码可以更早地执行，通常最好将它放在发送到ready()方法的处理程序中。

Answer 2

您可以使用.on()附加事件处理程序，以便您的函数在窗口加载和调整大小时运行，从而确保它在任一场景中都有效：

＆＃13;

$(window).on('load resize', function() {
  windowsize2 = $(window).height();
  windowW = $(window).width();
  if (windowsize2 < 400) {
      alert(1); // or whatever
  }
});

＆＃13;

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

＆＃13;

如何检查初始屏幕尺寸

2 个答案: