Safari Print Media Queries, die anderen Browsern nicht entsprechen/abschneiden

Ich habe eine Webanwendung, die in Safari gut aussieht, aber die Druckmedienabfragen werden vom Browser nicht berücksichtigt. In Chrome sieht der gesamte druckbare Bereich gut aus. In Safari scheint es jedoch nur eine Variation des sichtbaren Inhalts zu geben.Safari Print Media Queries, die anderen Browsern nicht entsprechen/abschneiden

Beim Scrollen auf der Seite wird der Kopf- oder obere Bereich abgeschnitten, beim Drucken auf der Seite wird der untere abgeschnitten.

Ich habe die folgenden für die Printmedien-Abfragen versucht (ohne Wirkung) -

Einstellen ein min-height
Einstellung Variation eines height Wert auf den Behälter
Auszoomen und Drucke
Ändern der Auflösung/Skala

Nichts erscheint irgendeinen Effekt haben.

Im Gegensatz zu Chrome kann ich keinen Weg finden zu debuggen, warum es passiert, noch eine Möglichkeit, die Druckstile selbst zu debuggen.

Hinweis - Ich benutze Bootstrap für Stile, so dass es Container, Zeilen, Spannen, etc ... aber sogar entfernen sie vollständig und alles auf seiner eigenen Linie macht keinen Unterschied, die gleiche "Höhe" des Inhalts ist auf dem Ausdruck gezeigt.

Quelle

2016-07-30 PW Kad

Können Sie eine jsfiddle als Beispiel nennen? – Dekel

Ja leider konnte jsfiddle nicht reproduzieren und ich gab auf, als ich fragte. Als ich dann zurückging und versuchte, eine Repro zu erstellen, fand ich heraus, warum. Beim Drucken in Chrome berücksichtigte ich, dass ich nicht nur versuchte, den Körper zu drucken, sondern alles, was sichtbar war. Wenn Sie eine Antwort zusammenstellen, die detailliert, dass ich das Kopfgeld gerne vergeben würde.Trick besteht darin, ein Modal oder einen Dialog für den Druckinhalt zu verwenden, so dass es die Gesamthöhe des Körpers nicht beeinflusst. –

@Dekel das war bei dir –

Ich habe hier keine Antworten erhalten, nachdem ich auf das Problem in den obigen Kommentaren hingewiesen und erwähnt habe, dass es sich um ein kostenloses Kopfgeld handelt. Leider würde ich gerne das Kopfgeld verschenken, so dass jeder, der das vor Bounty ablehnt, es haben kann -

Das Problem war, dass die Anwendung, die ich verwende, eine JavaScript-App ist, die ausgeführt wird und den Körper der Seite erstellt, die war nur ungefähr 400px groß. Nachdem der Body gerendert wurde, gibt es einen separaten bootstrap-modalen Dialog, der mit dem zu druckenden Inhalt angezeigt wurde und das CSS war gut und die Medienanfragen waren gut, aber der Inhalt der Modals wurde auf einen größeren als den Body gesetzt.

Bei Betrachtung scheint es, dass Safari (und wahrscheinlich andere Browser) die Höhe des Dialoges nicht berücksichtigten, wenn er die Höhe des Körpers berechnete.

Chrome und Firefox waren gut damit, weil es alle sichtbaren Inhalte druckte, aber in Safari druckt es nur Inhalt, der so groß wie der Körper ist, der in diesem Fall ungefähr 30% des Modals war. Durch das manuelle Auslösen des Körpers als min-height: 1200px; wurde das Problem gelöst, da dies die maximal mögliche Höhe des Inhalts des Bootstrap Modal-Dialogs war.

Quelle

2016-08-16 23:53:52

Ich hatte in der Vergangenheit viele Probleme mit Cross-Browser-Print-Media-Abfragen. Was hilft viel mit der Regulierung der visuellen setzt eine feste Seitengröße und HTML/Körper.

Zum Beispiel:

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

    body, 
    html { 
     width: 1600px; 
    } 
}

Quelle

2017-10-03 20:07:02

Safari Print Media Queries, die anderen Browsern nicht entsprechen/abschneiden

Antwort

Verwandte Themen