Question

我要做的是创建一个不依赖于媒体查询的聊天框。这在数学上设置了聊天室内容的大小。

我正在试验$(window).height()/$(window).width()，但这并不涵盖整个浏览器窗口。我想在没有CSS /媒体查询的情况下在javascript / jquery中完成所有这些

Answer 1

试试此代码段

(function() {
  window.onresize = displayWindowSize;
  window.onload = displayWindowSize;

  function displayWindowSize() {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
    // your size calculation code here
    document.getElementById("screen").innerHTML = myWidth + "x" + myHeight;
  };


})();

<div id="screen"></div>

Answer 2

window.innerWidth和window.innerHeight将在没有任何库的原生JavaScript中提供此答案。

如果您想获取特定HTML元素的尺寸，您可以使用offsetWidth和offsetHeight，例如document.body.offsetWidth

如果没有看到您的代码，并不完全确定您正在做什么，但是当您按照上面的步骤划分高度和宽度时，您只会获得一个比率，这可能就是您没有看到结果的原因期望？

Answer 3

如果$(window).height()未返回整个浏览器窗口大小，则表示存在结构性问题，例如<!DOCTYPE html>可能不是HTML文件的第一行等。

Answer 4

我遇到了与导航栏相关的类似问题，该导航栏需要在移动设备上单击事件处理程序和在桌面上需要悬停事件处理程序。最终，我发现JS media query function matchMedia()与setTimeout()一起使用时效果很好，因此它不会在每次像素更改时都运行。

我的解决方案可以在这里找到：https://stackoverflow.com/a/60837961/7353382

如何动态获取浏览器的高度和宽度？

4 个答案: