React编辑器A4页面移动端横向渲染异常及空白问题求助

我正在开发一款基于React.js的编辑器，其中包含可编辑的A4尺寸页面，在笔记本电脑端运行正常，但在移动端屏幕出现横向显示问题，不知如何解决。

HTML代码 #

<div>
   <div class="page" />
</div>

CSS代码 #

.page {
  width: 21cm;
  height: 29.7cm;
  padding: 1cm;
  margin: 0.5cm auto;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

尝试的解决方法 #

我给.page添加了以下样式来缩小页面适配移动端，但页面周围出现了多余空白：

scale: 0.45;
transform-origin: top left;

期望效果 #

实现页面在移动端单屏横向显示，无多余空白且无需滚动。

解决方案 #

要解决这个问题，核心是让A4页面根据移动端屏幕的宽高比自动适配，同时消除缩放后产生的空白。可以按以下步骤调整：

1. 设置移动端视口配置
   在HTML的<head>中添加视口标签，确保移动端按设备宽度渲染，禁止用户缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2. 调整容器与页面基础样式
   给外层容器添加全屏布局样式，同时修改.page的盒模型规则，避免padding额外占用空间：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.page-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page {
  width: 21cm;
  height: 29.7cm;
  padding: 1cm;
  box-sizing: border-box; /* 让padding计入元素宽高 */
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  transform-origin: center center;
}

3. 用React动态计算缩放比例
   在组件中添加监听逻辑，根据视口尺寸和A4页面的宽高比，自动计算最合适的缩放值，替代固定比例的scale：

import { useEffect, useRef } from 'react';

const Editor = () => {
  const pageRef = useRef(null);

  useEffect(() => {
    const adjustScale = () => {
      const page = pageRef.current;
      if (!page) return;

      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      const pageAspectRatio = 21 / 29.7; // A4标准宽高比
      const viewportAspectRatio = viewportWidth / viewportHeight;

      let scale;
      // 根据视口与页面的宽高比，选择优先适配宽度还是高度
      if (viewportAspectRatio > pageAspectRatio) {
        // 视口更宽，按高度适配
        scale = viewportHeight / (29.7 * 2.54); // 转换cm为px（1cm≈2.54px）
      } else {
        // 视口更高，按宽度适配
        scale = viewportWidth / (21 * 2.54);
      }

      page.style.transform = `scale(${scale})`;
    };

    adjustScale();
    window.addEventListener('resize', adjustScale);
    return () => window.removeEventListener('resize', adjustScale);
  }, []);

  return (
    <div className="page-container">
      <div ref={pageRef} className="page">
        {/* 编辑器内容 */}
      </div>
    </div>
  );
};

export default Editor;

这样调整后，A4页面会自动适配移动端视口尺寸，缩放后不会出现多余空白，且能实现单屏显示无需滚动。

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