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

你有沒有找到解決這個問題的方法？我遇到了同樣的問題。 –