在手机屏幕上渲染a4尺寸页面的问题

Question

我正在用 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;[enter image description here](https://i.stack.imgur.com/y0Sok.png)
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }

}

scale: 0.45;
transform-origin: top left;

添加了上述样式以缩小页面比例以在移动设备中呈现，但会在页面周围获得额外的空白空间。

期望在单屏中水平渲染，无需额外的空间和滚动。

Answer 1

您可以通过对 CSS 进行一些更改来纠正此问题

.page{
  width:100vw;
  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);
}