Chrome 打印时用于媒体查询的视口大小不正确答案

【问题标题】：Chrome Incorrect viewport size used for media queries when printingChrome 打印时用于媒体查询的视口大小不正确
【发布时间】：2016-02-06 01:53:09
【问题描述】：

我在 chrome 和打印方面遇到了一个奇怪的问题；当我尝试打印我的响应式网站时，在 chrome 的预览中我看到了智能手机版本，而我想打印桌面页面（在 safari 或 firefox 中，我像往常一样看到桌面版本）。我尝试在媒体打印中设置正文、html 和页面，但没有任何改变......所以我做了一个这样的测试页面：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <title>TestPage</title>
            <style type="text/css">
                .testContainer{
                   width:320px;
                   outline:1px solid red;
                }

                @media (min-width: 768px) {
                    .testContainer{
                        width:700px;
                        outline:1px solid green;
                    }
                }
                @media (min-width: 1024px) {
                    .testContainer{
                        width:960px;
                        outline:1px solid purple;
                    }
                }
            </style>
        </head>
    </head>
    <body>
        <div class="testContainer">
            <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem</p>
        </div>
    </body>
</html>

当我尝试打印时，我看到容器为 320 像素的红色。

有人可以帮我解决这个问题吗？

谢谢。

【问题讨论】：

您找到解决方案了吗？我遇到了同样的问题。

标签： html css google-chrome printing media-queries

【解决方案1】：

我在使用引导程序时遇到了同样的问题（Chrome 使用移动设备而不是桌面视图打印我的网站），但发现 chromium 中的错误尚未修复：

https://bugs.chromium.org/p/chromium/issues/detail?id=273306

到目前为止，我能找到的唯一解决方法是硬着头皮打印移动视图。

【讨论】：