咨询：实现点击图标切换div全屏显示的技术方案

我来帮你搞定这个需求，这里有两种实用的方案，你可以根据场景选择：

方案一：使用浏览器原生Fullscreen API（推荐） #

这是最标准的实现方式，利用浏览器提供的全屏API，能让目标元素进入系统级全屏状态，体验更贴合原生。

修改你的TypeScript方法： #

public onResize(event: Event) {
  // 阻止a标签默认的跳转行为
  event.preventDefault();
  
  // 获取需要全屏的目标div
  const targetDiv = document.getElementById('editview');
  if (!targetDiv) return;

  // 判断当前是否处于全屏状态，实现点击切换
  if (!document.fullscreenElement) {
    // 请求进入全屏
    targetDiv.requestFullscreen().catch(err => {
      console.error(`进入全屏失败: ${err.message}`);
    });
  } else {
    // 退出全屏
    document.exitFullscreen();
  }
}

可选：添加全屏状态下的样式 #

你可以通过CSS伪类定制全屏时的元素样式，确保它铺满整个屏幕：

#editview:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0;
  padding: 0;
  border: none;
}

/* 兼容webkit内核浏览器（Chrome、Safari等） */
#editview:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0;
  padding: 0;
  border: none;
}

方案二：手动设置样式实现全屏（无需API） #

如果不需要系统级全屏，只是视觉上铺满浏览器窗口，可以用这种方式，通过添加/移除CSS类切换状态。

TypeScript方法修改： #

public onResize(event: Event) {
  event.preventDefault();
  const targetDiv = document.getElementById('editview');
  if (!targetDiv) return;
  
  // 切换自定义的全屏类
  targetDiv.classList.toggle('fullscreen');
}

对应的CSS样式： #

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* 确保元素在最上层，不被其他内容遮挡 */
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* 根据页面背景调整 */
}

注意事项： #

• 必须调用event.preventDefault()，否则a标签的默认跳转行为会干扰全屏逻辑。
• 使用Fullscreen API时，部分浏览器要求必须由用户手动触发（不能自动全屏），这是浏览器的安全限制。

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