打印媒体查询无法在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; }
}