Question

在Chrome和Firefox中，添加以下内容：

<style>
        body {
            margin: 0;
            padding: 0;
        }

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

        @media print {
            body {
                width: 130vw;
            }
        }
</style>

此CSS缩小了Chrome和Firefox打印预览中的内容，这是预期的功能，因为默认情况下渲染的HTML显得太大（因此使用的纸张过多）。

然而，Safari不是缩小身体，而是将其扩展到实际页面之外130％。这会导致HTML的某些部分根本不会出现在打印中。

如何解决此问题，以使Safari的行为与其他浏览器保持一致？

Answer 1

请使用px

   <style>
            body {
                margin: 0;
                padding: 0;
            }

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

            @media print {
                body {
                    **width: 1024px;**
                }
            }
    </style>

您还可以在safari

中添加命令@page

@page {
margin: 0cm !important;
}

对Safari 6没有任何影响，它在Chrome 23中没有效果。据我所知，只要Safari不支持此功能，就没有解决方案（它似乎固定在10mm左右）。

此处显示的页面设置您可能需要在“打印...”菜单面板中定义一个自定义的“纸张尺寸”，没有任何余量（您已经这样做了）。

显然要照顾其他内容html，身体......没有任何余地。

Answer 2

单独使用@ JMF＆＃39解决方案对我不起作用。但是，这个解决方案解决了这个问题：

<style>
            body {
                margin: 0;
                padding: 0;
            }

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

            @media print {
                body {
                    width: 1024px; /* Using px here */
                }

                body > div {
                    max-width: 1024px; /* Set container max-width to same width as body to avoid overflow */
                }
            }
    </style>

视口宽度大于100的CSS @media打印体缩小了内容，但在Safari上没有

2 个答案: