Print Media Abfrage funktioniert nicht auf iOS (Chrome, Safari, Mozilla)

Question

Ich versuche herauszufinden, warum die @media print scheint nicht auf dem iOS zu arbeiten, auf Android funktioniert die Funktionalität gut. Im Grunde habe ich eine Funktionalität gemacht, den Inhalt zu verbergen, die nicht Teil des Drucks sind

body.printing *{display : none}

und nur die Inhalte anzuzeigen, die

body.printing .print-me, body.printing .print-me > div{display : block} gedruckt werden.

$('.print-modal').on('click', function() { 
    $('body').addClass('printing'); 
    window.print(); 
    $("body").removeClass("printing"); 
}) 

@media print { 
    /* Hide everything in the body when printing... */ 
    body.printing * { display: none; } 
    /* ...except our special div. */ 
    body.printing .print-me, body.printing .print-me > div { display: block; } 
} 

@media screen { 
    /* Hide the special layer from the screen. */ 
    .print-me { display: none; } 
} 

Answer 1

Vielleicht ist die Frage, Sie sofort printing und Entfernen der gleichen Klasse eine Klasse hinzufügen. Das könnte der Grund sein.

Versuchen Sie, die Logik zu ändern. Sie müssen keine Klasse zum Drucken hinzufügen. Verwenden Sie stattdessen die Druckmedienabfrage @media print, um die Drucklogik zu verarbeiten.

$('.print-modal').on('click', function() { 
    window.print(); 
}) 

@media print { 
    /* Hide everything in the body when printing... */ 
    body * { display: none; } 
    /* ...except our special div. */ 
    body .print-me, body .print-me > div { display: block; } 
} 

@media screen { 
    /* Hide the special layer from the screen. */ 
    .print-me { display: none; } 
}