实施例

Question

我要做的是在用户可以与之交互的页面上创建一个区域，该区域的大小与一张纸的典型大小（A4）完全相符，这样用户就可以清楚地知道打印看起来像是在构建可打印区域（在访问打印预览之前）。我根本不想也不应该使用@media print。

似乎页面的可打印区域的边界对应于实际的浏览器窗口（window.innerWidth等）仅有时，，而在其他时候，元素位于< strong>靠近页面中心部分被排除在可打印区域之外，甚至完全被排除在外。

我似乎无法找到任何押韵或理由。我试过看SO，发现一个与可打印区域有关的问题，但是对于不同的语言/背景。试过看谷歌。什么都没有。

[edit]现在我想到了它，它的行为有点像视口/视图裁剪/缩放。

有谁知道如何找到网页及其周边的实际可打印区域？

实施例

位置right: 0的元素出现在页面的最右侧，并且将包含在打印中，但具有讽刺意味的是，当拖动更接近时，相同的元素最终会被部分排除屏幕的中心。

...
  <body>
    <div id="l"></div>
    <div id="r"></div>
    <textarea draggable="true" id="textarea"></textarea>
  </body>
...

@media print {
  #l, #r {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  #l {
    background: blue;
  }
  #r {
    left: 50%;
    background: orange;
  }
  #textarea {
    right: 0;
  }
}

但是，如果我将图像拖到靠近页面中心的位置，具有讽刺意味的是，它会被部分排除在可打印区域之外......

Answer 1

通常，仅为打印目的而设计的特殊样式表与网页相关联。此样式表可以包含/排除任何内容。

此处 some reading 设置了打印样式表。

如何找到可打印区域的实际周长？

实施例

但是，如果我将图像拖到靠近页面中心的位置，具有讽刺意味的是，它会被部分排除在可打印区域之外......

1 个答案: