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