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

我在使用chrome和打印时遇到了一个奇怪的问题;当我尝试打印我的响应式网站时，在Chrome浏览器的预览中，我看到智能手机版本，同时我想打印桌面页面（在safari或firefox中，像往常一样，桌面版本）。我试着在介质的打印，但没有改变设置身体，html和页面...所以我做了一个测试页面是这样的：Chrome在打印时用于媒体查询的视口大小不正确

<!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像素的容器为红色。

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

谢谢。

来源

2015-11-05 Tiago Brescia

你有没有找到解决这个问题的方法？我遇到了同样的问题。 –