相关疑难解决方法(0)

在html头:

<script type="text/javascript">
    var myWidth = 0, myHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth; myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
        myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
    }
</script>

在html体内:

<script type="text/javascript">
    document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>

它运作良好.问题是:如何在调整浏览器大小时显示宽度/高度值？就像这里http://quirktools.com/screenfly/左下角.

非常感谢!

有没有办法将css属性设置为屏幕宽度？

我想要实现的是接近于此的东西：

div{width: screen width; }

或者

.divTest{width: screen width; }

编辑 1：我想使用该类来精确调整具有当前宽度的其他元素的大小，就像我使用 css 选择的那样。

编辑 2：我不相信它可以在没有某种脚本的情况下完成，但我知道什么。

编辑 3：最终想法Alex V 的回答中有一篇关于使用 JavaScript 调整寡妇大小的脚本的帖子。您只需添加您想要的脚本风格。在我的情况下，它会设置一个类属性。但是我相信在某些用途中使用 JavaScript 设置视觉属性可能是不好的做法/不可取的。

我有一个scorm模块,它在我的js文件中的window.open中的resizable = 1的新窗口中启动:

function OpenScormModuleWindow(scormModuleId, scormModuleUrl, title, width, height) 
{
  _scormModuleId = scormModuleId;
  InitializeUserScormModule();
  scormModuleWindow = window.open(scormModuleUrl, "title", "width=" + width + ", height=" + height + ", resizable = 1");
  scormModuleWindow.focus();
}

在我看来,我有:

  var myWidth = 0, myHeight = 0;
  if (typeof (window.innerWidth) == 'number')
  {
      myWidth = window.innerWidth;
      myHeight = window.innerHeight;
  }
  else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
  {
      myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
  }
  else if (document.body && (document.body.clientWidth || document.body.clientHeight))
  {
      myWidth = document.body.clientWidth; …

我有两个变量来计算 clientHeight，除以 2 并加 44。它当前按预期工作，除非调整窗口大小，需要刷新页面才能重新计算 clientHeight。一旦刷新，它就会正确地重新定位 div。如何在调整窗口大小时重新计算每个窗口的 clientHeight ，以便不需要刷新页面即可再次运行脚本并获取新的高度？

这是基于滚动位置的动画的一部分。当您向下滚动页面时，div 会产生动画。

var triggerOffset = document.documentElement.clientHeight / 2 + 44;
var cardHeight = $('#card').outerHeight(true) / 2 + 22;
var duration = 1000;
var requestId = null;

var sceneStart;
if (window.matchMedia("(max-width: 1080px)").matches) {
    sceneStart = 4000
} else {
    sceneStart = 4000
}
console.log(sceneStart); 

TweenLite.set(".contain", {
    top: triggerOffset - cardHeight
});

TweenLite.set(".timeline-trigger", {
    top: triggerOffset
});

TweenLite.set(".start-trigger", {
    top: sceneStart
});

TweenLite.set(".end-trigger", {
    top: sceneStart + duration
});

// SCROLL MAGIC!!!
var …

我想知道如何不断获得当前浏览器的高度和宽度。现在，我正在使用 jQuery 并且有这样的东西：

var height = window.innerHeight;
var width = window.innerWidth;

这最初确实有效，因为它在页面加载时获取屏幕。但是，当用户手动更改屏幕宽度/高度时，我似乎无法获得当前尺寸并且页面开始出现错误。我应该如何始终检查尺寸？我试过在谷歌上搜索答案，但我似乎找不到任何适用的东西，尽管我相信许多其他人也有同样的问题（我认为我没有搜索正确的关键字！）。请让我知道我能做什么！！谢谢！

我如何在 Javascript 中调用一个简单的函数，例如：

function doSmt() {
   alert("hello world")
}

每当用户要以任何方式调整窗口大小时。例如，如果他只是用鼠标调整其大小，或者放大或缩小网站。

我已经尝试过：

window.onresize = doSmt()

正如某些网站上的情况，但这不起作用。

我正在使用HTML 5 Blank Child Theme从Wordpress加载前端站点.我有一个使用粒子滑块的徽标效果,当我的屏幕尺寸> 960px时; 对于屏幕尺寸<960px我有一个平面徽标图像.这一切都很好,但是当我在徽标之间重新调整大小时,必须手动刷新页面(即按下cmd+ r)才能再次显示PS效果.如何纠正此问题,以便在重新调整尺寸后自动显示效果？

这是我的代码 -

粒子slider.php

<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->

    <div id="particle-slider">
        <div class="slides">
            <div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
        </div>
        <canvas class="draw" style="width: 100%; height: 100%;"></canvas>
     </div>
     <script type="text/javascript">
        var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
     </script>
  <div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>

  <!-- particle-slider template -->

style.css文件

/* RWD for logo */

@media screen and (max-width: 960px) {


    #particle-slider …