打印媒体查询无法在iOS上运行（chrome，safari，mozilla）

Question

I'm trying to figure why the @media print doesn't seem to work on the iOS, on android the functionality works fine. Basically I've made a functionality to hide the contents that aren't part of the print

body.printing *{display : none}

and only display the contents that will be printed

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

$('.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

Maybe the issue is, you are adding a class printing and removing the same class immediately. That's could be the reason.

Try changing the logic. You don't need to add a class for printing. Instead use print media query @media print to handle print logic.

$('.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; }
}