Safari (Mac) 打印比所有其他瀏覽器都大

Question

我為使用引導程序的應用程序構建了 2 個頁面，最終用戶在填寫一些信息后最終打印提交表單。

我已經為@media print編寫了 styles 我正在使用page-break-after將 2 個容器 div 分成 2 頁。 除了 Mac 上的 Safari 之外，所有這些都完全按預期工作。 這在 PC 上的 IE9 和 10、Firefox、Chrome 甚至 Safari 上完美打印。 它還可以在 Mac 上的 Chrome 和 Firefox 上完美打印。 除了 Mac 上的 Safari 之外，這些都打印出完全相同的內容，它打印的所有內容都更大，這會將我的第二頁推到第三頁。

這是我的 2 個打印頁面的基本結構，容器 div 只有 600 像素寬。

<!-- First Page -->
<div class="container page-break">
  <div class="row">
    <div class="col-sm-12 center">
      IMAGE HERE 
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 center">
      TEXT HERE
    </div>
  </div>  
  <div class="row">
    <div class="col-sm-12 center">
      ANOTHER IMAGE 
    </div>
  </div>
  <div class="row">
    <div class="col-sm-7">
      MORE TEXT
    </div>
    <div class="col-sm-5">
      MORE TEXT
    </div>
  </div> 
</div>
<!-- /.First Page -->
<!-- Second Page -->
<div class="container page-break">
  <div class="row">
    <div class="col-sm-12 center">
      HEADER IMAGE HERE
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 center">
      LONG SET OF TEXT HERE
    </div>
  </div>   
</div>
<!-- /.Second Page -->

任何讓 Safari 像所有其他瀏覽器一樣在 Mac 上打印的提示都會很棒。 值得一提的是，這些需要在不改變瀏覽器中的任何打印設置的情況下打印。

Answer 1

我有類似的情況，解決方案就在這個答案中； 您必須在提供的答案示例中定義一個特定的大小，就像這樣，以便在打印時使容器的大小變小或變大（特別是 Bootstrap 的容器類）：

    @media print {
        html, body, main, header, footer, .container {
           ...
           min-width: 800px !important;
           ...
        }
    }