用 JavaScript 控制浏览器窗口大小？

Posted 2023-04-03

用 javascript 控制浏览器窗口大小：
A:有时候，需要控制显示窗口的大小，通过点击窗口右上角的控制按钮来实现。
function Minimize()

window.innerWidth = 100;
window.innerHeight = 100;
window.screenX = screen.width;
window.screenY = screen.height;
alwaysLowered = true;

function Maximize()

window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;


上面的代码包含 2 个函数，第 1 个函数 Minimize 中使用 innerWidth 和 innerHeight 2 个命令在象素级别上控制窗口尺寸大小，这里将窗口设置为宽 100 高100。然后，设置窗口的起始位置，定位大小为屏幕的宽和高，这样，使用 alwaysLowered 命令就将窗口缩小并移动到了屏幕的右下角。触发事件是一个 JavaScript 链接 〈A HREF="javascript:onClick=Minimize()"〉Minimize〈/A〉。同时，上述代码可以用于设置屏幕的任何分辨率。
　 注意，当在页面上应用这个功能时，请将那 2 个触发事件的链接放置在页面的左上角，这样，当窗口缩小到右下角时，也不会消失。 参考技术A 有时候，我们需要控制显示窗口的大小，这当然能够通过点击窗口右上角的控制按钮来实现。但是

，能否在页面中通过链接来实现呢？答案是：能！请看下面的代码：
〈SCRIPT LANGUAGE=“JavaScript“〉
function Minimize()

window.innerWidth = 100;
window.innerHeight = 100;
window.screenX = screen.width;
window.screenY = screen.height;
alwaysLowered = true;

function Maximize()

window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;

〈/SCRIPT〉
〈A HREF=“javascript:onClick=Minimize()“〉Minimize〈/A〉
〈A HREF=“javascript:onClick=Maximize()“〉Maximize〈/A〉
　 上面的代码包含 2 个函数，先来看看第 1 个。函数 Minimize 中使用 innerWidth 和 innerHeight

2 个命令在象素级别上控制窗口尺寸大小，这里将窗口设置为宽 100 高 100。然后，设置窗口的起始位

置，定位大小为屏幕

如何在javascript中获取浏览器窗口大小？ [复制]

【中文标题】如何在javascript中获取浏览器窗口大小？ [复制]

【英文标题】：how to get browser window size in javascript? [duplicate]

【发布时间】：2017-04-15 17:45:57

【问题描述】：

我需要获取浏览器窗口大小，并将窗口大小设置为javascript中的div大小。

如果窗口大小为 568 像素，我有 2 个 div 元素意味着，div1 想要 38%，div2 是 62%。 在每个尺寸中，两个 div 都希望保持相同的百分比尺寸。

【问题讨论】：

get browser window size javascript

【参考方案1】：

你可以用这个：

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

更新：

当屏幕等于或小于 568px 时，设置两个 div 元素的宽度：

if(width <= 568) document.getElementById('div_1').style.width = '38%'; document.getElementById('div_2').style.width = '62%';

或者使用我认为推荐的仅基于 CSS 的解决方案，在这种情况下更简单，利用 media queries：

.container
  width: 100%;

.div_element 
  height: 100px;
  width: 100%;

#div_1 
  width: 38%;
  background: #adadad;

#div_2 
  width: 62%;
  background: #F00;

@media(max-width: 568px) 
  #div_1 
    width: 38%;
  
  #div_2 
    width: 62%;
  
  .div_element 
    float: left;
  

<div class='container'>
  <div id='div_1' class='div_element'>
    div 1
  </div>
  <div id='div_2' class='div_element'>
    div 2
  </div>
</div>

【讨论】：

如何设置以上百分比的div宽度？

568px 是我提到的一个示例宽度，如果大小增加，则两个 div 大小在主窗口大小中计算相同的百分比。

那么请检查我的第二个解决方案，如果您需要更多帮助，请告诉我。

var width = window.innerWidth; c=(宽度/100)*38;警报（c）；

你对上面的代码行有什么看法？它只计算脚本中的百分比，是对还是错？我只是这样问。我知道上面创建的css方法，我只需要在脚本中创建。

【参考方案2】：

使用以下代码获取浏览器窗口的高度和宽度：

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

【参考方案3】：

既然 CSS 本身可以做到这一点，为什么还需要 JS 来做到这一点？这段代码将维护每个屏幕尺寸上的 div 尺寸

body 
  margin: 0px;
  height: 100vh;

#div1 
  width: 38%;
  height: 100%;
  float: left;
  background: red;

#div2 
  width: 62%;
  height: 100%;
  float: left;
  background: yellow;

#divMain 
  clear: both;
  height:100%;

#divMain:after,
#divMain:before 
  display: table;
  content: '';

#divMain:after 
  clear: both;

<div id="divMain">
  <div id="div1">
  </div>
  <div id="div2"></div>
</div>