Safari Print Media他のブラウザと一致しないクエリ/切断

Question

私はSafariでレンダリングしたときに見た目がよく、印刷媒体のクエリがブラウザによって尊重されていないと思われるWebアプリケーションを持っています。 Chromeでは、印刷可能な領域全体がきれいに見えますが、Safariでは可視コンテンツのバリエーションが一部しかないようです。

ページを下にスクロールすると、ヘッダーまたは上の領域が切り捨てられ、ページの上に印刷すると下が切り取られます。

私は（効果なしで）印刷メディアクエリのために、次の試してみた -

1. どのズームアウトの容器
2. 上height値のばらつきや印刷の設定min-height
3. を設定します
4. 解像度/スケールの変更

何も表示されません何の効果もありません。

Chromeとは異なり、私はそれが起こっている理由をデバッグする方法も、印刷スタイル自体をデバッグする方法も見つけられません。

注 - 私は、コンテナ、行、スパンなどがありますので、スタイルにはブートストラップを使用していますが、それらを完全に削除しても、それ自身の行にあるものは何の違いもありません。印刷物に表示されます。

Answer 1

私は、上記のコメントで問題を指摘し、それが無料の賞金であることを述べた後、ここで何の答えも得ていません。残念ながら私は賞金をあげたいと思いますので、報奨金の期限が切れる前に再転記した人は誰でもそれを受け取ることができます -

問題は、私が使用しているアプリケーションが実行され、わずか400ピクセルの高さです本文がレンダリングされた後に、印刷するコンテンツと共に表示されていた別個のブートストラップモーダルダイアログがあり、CSSのすべてが良好でメディアクエリーは良好でしたが、モーダルのコンテンツはボディよりも大きく設定されていました。

検査の結果、体の高さを計算するときにSafari（およびおそらく他のブラウザ）がダイアログの高さを考慮していないようです。

表示されているすべてのコンテンツを印刷したため、ChromeとFirefoxはうまくいきましたが、Safariでは本体と同じ高さのコンテンツ（この場合はモーダルの約30％）を印刷します。ボディを手動でmin-height: 1200px;にトリガすると、ブートストラップモーダルダイアログのコンテンツの最大可能高さであるため、問題が解決されました。

Answer 2

過去にクロスブラウザ印刷メディアのクエリで多くの問題がありました。ビジュアルを調整するのに役立つものは、固定ページサイズとhtml/bodyを設定することです。例えば

：

@media print { 
    @page { 
     size: 1600px; 
    } 

    body, 
    html { 
     width: 1600px; 
    } 
}