diff --git a/packages/map/src/map.ts b/packages/map/src/map.ts
index 5b53556fd1..adcba58ff3 100644
--- a/packages/map/src/map.ts
+++ b/packages/map/src/map.ts
@@ -26,14 +26,19 @@ import type { TaskID } from './utils/task_queue';
 import TaskQueue from './utils/task_queue';
 
 (function () {
-  if ( typeof window.CustomEvent === "function" ) return false; //If not IE
+  if (typeof window.CustomEvent === 'function') return false; //If not IE
 
-  function CustomEvent ( event: any, params:any ) {
+  function CustomEvent(event: any, params: any) {
     params = params || { bubbles: false, cancelable: false, detail: undefined };
-    const evt = document.createEvent( 'CustomEvent' );
-    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    const evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(
+      event,
+      params.bubbles,
+      params.cancelable,
+      params.detail,
+    );
     return evt;
-   }
+  }
 
   CustomEvent.prototype = window.Event.prototype;
   // @ts-ignore
@@ -303,7 +308,11 @@ export class Map extends Camera {
     if (typeof window !== 'undefined') {
       window.removeEventListener('online', this.onWindowOnline, false);
       window.removeEventListener('resize', this.onWindowResize, false);
-      window.removeEventListener('orientationchange', this.onWindowResize, false);
+      window.removeEventListener(
+        'orientationchange',
+        this.onWindowResize,
+        false,
+      );
     }
   }
 
diff --git a/packages/renderer/src/device/index.ts b/packages/renderer/src/device/index.ts
index 6b48d095d6..342b9f5972 100644
--- a/packages/renderer/src/device/index.ts
+++ b/packages/renderer/src/device/index.ts
@@ -111,11 +111,22 @@ export default class DeviceRendererService implements IRendererService {
       OES_texture_float: !isWebGL2(gl) && this.device['OES_texture_float'],
     };
 
+    this.createMainColorDepthRT(canvas.width, canvas.height);
+  }
+
+  private createMainColorDepthRT(width: number, height: number) {
+    if (this.mainColorRT) {
+      this.mainColorRT.destroy();
+    }
+    if (this.mainDepthRT) {
+      this.mainDepthRT.destroy();
+    }
+
     this.mainColorRT = this.device.createRenderTargetFromTexture(
       this.device.createTexture({
         format: Format.U8_RGBA_RT,
-        width: canvas.width,
-        height: canvas.height,
+        width,
+        height,
         usage: TextureUsage.RENDER_TARGET,
       }),
     );
@@ -123,8 +134,8 @@ export default class DeviceRendererService implements IRendererService {
     this.mainDepthRT = this.device.createRenderTargetFromTexture(
       this.device.createTexture({
         format: Format.D24_S8,
-        width: canvas.width,
-        height: canvas.height,
+        width,
+        height,
         usage: TextureUsage.RENDER_TARGET,
       }),
     );
@@ -233,13 +244,11 @@ export default class DeviceRendererService implements IRendererService {
     width: number;
     height: number;
   }) => {
-    // use WebGL context directly
-    // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch
-    // this.gl._gl.viewport(x, y, width, height);
+    // @see https://observablehq.com/@antv/g-device-api#cell-267
+    this.swapChain.configureSwapChain(width, height);
+    this.createMainColorDepthRT(width, height);
     this.width = width;
     this.height = height;
-    // Will be used in `setViewport` from RenderPass later.
-    // this.gl._refresh();
   };
 
   readPixels = (options: IReadPixelsOptions) => {
@@ -272,7 +281,6 @@ export default class DeviceRendererService implements IRendererService {
   };
 
   getCanvas = () => {
-    // return this.$container?.getElementsByTagName('canvas')[0] || null;
     return this.canvas;
   };