如何实现点击按钮时将浏览器分辨率调整为指定大小？

基础实现代码 #

先写HTML结构，创建触发按钮：

<button id="resizeBtn">调整窗口到800×600</button>

再写JavaScript逻辑，给按钮绑定点击事件并调用resizeTo()方法：

// 获取按钮元素
const resizeButton = document.getElementById('resizeBtn');

// 绑定点击事件
resizeButton.addEventListener('click', function() {
  // 调用resizeTo指定宽度和高度（单位：像素）
  window.resizeTo(800, 600);
});

关键注意点 #

• window.resizeTo(width, height) 是直接设置浏览器窗口大小的方法，第一个参数为宽度，第二个为高度，单位都是像素。
• 必须通过用户主动触发（比如点击按钮）才能生效，多数浏览器会拦截非用户交互触发的窗口调整，防止恶意操作。
• 多标签模式下，该方法会调整整个浏览器应用的窗口大小，而非单个标签页的显示区域。

扩展：自定义尺寸调整 #

如果需要支持用户输入自定义尺寸，可以添加输入框：

<input type="number" id="widthInput" placeholder="宽度" value="800">
<input type="number" id="heightInput" placeholder="高度" value="600">
<button id="customResizeBtn">调整到自定义尺寸</button>

对应的JavaScript逻辑：

const customBtn = document.getElementById('customResizeBtn');
const widthInput = document.getElementById('widthInput');
const heightInput = document.getElementById('heightInput');

customBtn.addEventListener('click', function() {
  const width = parseInt(widthInput.value);
  const height = parseInt(heightInput.value);
  // 简单校验输入是否为有效正数
  if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
    window.resizeTo(width, height);
  } else {
    alert('请输入有效的宽高数值');
  }
});

内容的提问来源于stack exchange，提问作者Amar Trnjanin