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; }
}

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

1 个答案: