打印媒體查詢無法在iOS上運行（chrome，safari，mozilla）

Question

我試圖弄清楚為什么@media print似乎不適用於iOS，在Android上功能正常。 基本上我已經創建了一個隱藏不屬於打印內容的功能

body.printing *{display : none}

並且僅顯示將要打印的內容

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

也許問題是，您正在添加類printing並立即刪除相同的類。 這可能是原因。

嘗試更改邏輯。 您無需為打印添加類。 而是使用打印介質查詢@media print來處理打印邏輯。

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