Safari Media drukowania Zapytania niezgodne z innymi przeglądarkami/obcięcie

Question

Mam aplikację internetową, która wygląda dobrze po wyrenderowaniu w Safari, ale zapytania o media drukowane nie są przestrzegane przez przeglądarkę. W Chrome cały obszar do zadrukowania wygląda dobrze, jednak w Safari wydaje się być tylko pewną odmianą widocznej treści.

Podczas przewijania strony nagłówek lub górny obszar jest odcinany, podczas drukowania wyżej na stronie dno jest odcinane.

Próbowałem następujących dla zapytań prasie (bez efektu) -

1. wyznaczając min-height
2. Ustawianie żadnego wahania wartości height na pojemniku
3. pomniejszania i druku
4. Zmiana rozdzielczości/skali

Nic się nie pojawia mieć jakikolwiek efekt.

W przeciwieństwie do Chrome, nie mogę znaleźć sposobu debugowania, dlaczego tak się dzieje, ani sposobu debugowania samych stylów drukowania.

Uwaga - używam Bootstrap dla stylów, więc są tam kontenery, rzędy, przęsła itp., Ale nawet całkowicie je usuwając i wszystko, co znajduje się na własnej linii, nie ma znaczenia, ta sama "wysokość" zawartości jest pokazano na wydruku.

Answer 1

Nie otrzymałem tutaj żadnych odpowiedzi po tym, jak wskazałem na problem w powyższych komentarzach i wspomniałem o darmowej nagrywce. Niestety z chęcią oddam nagrodę, więc każdy, kto ją odtworzy przed wygaśnięciem nagrody, może ją mieć -

Problem polegał na tym, że aplikacja, z której korzystam, jest aplikacją JavaScript, która uruchamia i tworzy treść strony tylko około 400 pikseli. Po wyświetleniu treści pojawia się osobne modalne okno dialogowe ładowania początkowego, które było wyświetlane wraz z treścią do wydrukowania, a wszystkie arkusze CSS były dobre, a zapytania o media były dobre, ale zawartość modałów była większa niż treść.

Podczas inspekcji wydaje się, że Safari (i prawdopodobnie inne przeglądarki) nie brały pod uwagę wysokości okien dialogowych podczas obliczania wysokości ciała.

Chrome i Firefox były w porządku, ponieważ wydrukowały całą widoczną treść, ale w Safari wydrukowano tylko zawartość tak wysoką, jak ciało, co w tym przypadku stanowiło około 30% modalu. Ręczne wyzwolenie ciała, które ma być min-height: 1200px; rozwiązało problem, ponieważ była to maksymalna możliwa wysokość okna dialogowego Modemu Bootstrapa.

Answer 2

W przeszłości miałem wiele problemów z zapytaniami o media drukarskie z przeglądarki krzyżowej. To, co bardzo pomaga w regulacji wizualnej, to ustawienie stałego rozmiaru strony i html/body.

Na przykład:

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

    body, 
    html { 
     width: 1600px; 
    } 
}