javascript - 打印媒体查询不适用于 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; }
}