如何动态获取浏览器的高度和宽度？
[英]How can I dynamically get browser height and width?
问题描述
What im looking to do is create a chatbox that doesn't rely on media queries.
我想要做的是创建一个不依赖媒体查询的聊天框。 That mathematically sets sizes of the chatbox content.这在数学上设置了聊天框内容的大小。
I was experimenting with $(window).height()/$(window).width() but that doesn't cover the whole browser window. I wanted to do this all in javascript/jquery without css/media queries我正在试验$(window).height()/$(window).width()但这并没有涵盖整个浏览器 window。我想在没有 css/media 查询的情况下在 javascript/jquery 中完成这一切
5 个解决方案
解决方案1
5 已采纳 2017-12-24 02:51:58
Try this code snippet试试这个代码片段
(function() { window.onresize = displayWindowSize; window.onload = displayWindowSize; function displayWindowSize() { let myWidth = window.innerWidth; let myHeight = window.innerHeight; // your size calculation code here document.getElementById("screen").innerHTML = myWidth + "x" + myHeight; }; })();
<div id="screen"></div>
解决方案2
0 2017-12-24 02:36:40
window.innerWidth and window.innerHeight will give this answer in native JavaScript without any library. window.innerWidth和window.innerHeight将在没有任何库的原生 JavaScript 中给出这个答案。
If you want to get the dimensions of a specific HTML Element, you could instead use offsetWidth and offsetHeight , eg document.body.offsetWidth如果您想获取特定 HTML 元素的尺寸，您可以改用offsetWidth和offsetHeight ，例如document.body.offsetWidth
Not exactly sure what you're doing without seeing your code, but when you divide height by width as you do above, you only get a ratio, which is probably why you're not seeing the results you expect?在没有看到代码的情况下不确定你在做什么，但是当你像上面那样用高度除以宽度时，你只会得到一个比率，这可能就是为什么你没有看到你期望的结果？
解决方案3
0 2017-12-24 02:46:40
如果$(window).height()没有返回整个浏览器窗口大小，那么你有结构问题，比如<!DOCTYPE html>可能不是你的 HTML 文件的第一行等。
解决方案4
0 2020-03-24 19:32:15
I ran into a similar problem relating to a nav bar that needed a click event handler on mobile and a hover event handler on desktop.我遇到了一个与导航栏相关的类似问题，该问题需要移动设备上的点击事件处理程序和桌面上的悬停事件处理程序。 Eventually I found the JS media query function matchMedia() which worked well with setTimeout() so it doesn't run on every pixel change.最终我找到了JS 媒体查询函数matchMedia() ，它与setTimeout()得很好，因此它不会在每次像素更改时运行。
My solution can be found here: https://stackoverflow.com/a/60837961/7353382我的解决方案可以在这里找到： https : //stackoverflow.com/a/60837961/7353382
解决方案5
0 2022-03-27 19:55:09
If you want to set the maxWidth or minWidth browser screen size like media query dynamically in JavaScript and then define styles or anything else, you can use the Window interface's matchMedia() method.如果您想在 JavaScript 中动态设置 maxWidth 或 minWidth 浏览器屏幕大小，然后定义 styles 或其他任何内容，您可以使用 Window 接口的 matchMedia() 方法。 It will return a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.它将返回一个新的 MediaQueryList object，然后可用于确定文档是否与媒体查询字符串匹配，以及监视文档以检测它何时匹配（或停止匹配）该媒体查询。
Ok, the syntax:好的，语法：
const pageWidth = window.matchMedia('(min-width: 600px)');
and we can use the object that returns in different ways:我们可以使用以不同方式返回的 object：
const handlePageColor = () => {
if (pageWidth.matches) {
document.body.style.backgroundColor = "yellow";
}
};
And finally you should addListener() method to our object, this causes our function to run whenever the browser screen size changes.最后，您应该将 addListener() 方法添加到我们的 object，这会导致我们的 function 在浏览器屏幕尺寸发生变化时运行。
pageWidth.addListener(handlePageColor);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.