diff --git a/src/components/image-viewer/image-viewer.tsx b/src/components/image-viewer/image-viewer.tsx
index 08d6f3f6d6..5f4448aa16 100644
--- a/src/components/image-viewer/image-viewer.tsx
+++ b/src/components/image-viewer/image-viewer.tsx
@@ -116,7 +116,16 @@ export const MultiImageViewer = forwardRef<
       slidesRef.current?.swipeTo(index, immediate)
     },
   }))
-
+  const viewportWidth = (function () {
+    try {
+      const host = props.getContainer && props.getContainer();
+      if (host && host.getBoundingClientRect) {
+        const w = host.getBoundingClientRect().width;
+        if (w && w > 0) return w;
+      }
+    } catch (e) {}
+    return typeof window !== 'undefined' ? window.innerWidth : 375;
+  })();
   const onSlideChange = useCallback(
     (newIndex: number) => {
       if (newIndex === index) return
@@ -150,6 +159,7 @@ export const MultiImageViewer = forwardRef<
             onTap={props.onClose}
             maxZoom={props.maxZoom}
             imageRender={props.imageRender}
+            viewportWidth={viewportWidth}
           />
         )}
       </div>
diff --git a/src/components/image-viewer/slides.tsx b/src/components/image-viewer/slides.tsx
index 3c629d9134..a263d221d8 100644
--- a/src/components/image-viewer/slides.tsx
+++ b/src/components/image-viewer/slides.tsx
@@ -23,13 +23,17 @@ export type SlidesType = {
     image: string,
     { ref, index }: { ref: RefObject<HTMLImageElement>; index: number }
   ) => ReactNode
+  viewportWidth: number
 }
 export type SlidesRef = {
   swipeTo: (index: number, immediate?: boolean) => void
 }
 
 export const Slides = forwardRef<SlidesRef, SlidesType>((props, ref) => {
-  const slideWidth = window.innerWidth + convertPx(16)
+  const baseWidth = props.viewportWidth
+
+  const slideWidth = baseWidth + convertPx(16)
+
   const [{ x }, api] = useSpring(() => ({
     x: props.defaultIndex * slideWidth,
     config: { tension: 250, clamp: true },
@@ -51,6 +55,7 @@ export const Slides = forwardRef<SlidesRef, SlidesType>((props, ref) => {
   }))
 
   const dragLockRef = useRef(false)
+
   const bind = useDrag(
     state => {
       if (dragLockRef.current) return