Question

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

<!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>

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

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

感谢。

Answer 1

我在使用bootstrap时遇到了同样的问题（Chrome使用移动设备而不是桌面视图打印我的网站），但发现铬中的错误尚未解决：

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

到目前为止，我唯一能找到的解决办法就是咬紧牙关并打印移动视图。

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

1 个答案: