如何使打印使用桌面媒体查询？

我正在尝试向我的页面添加一些打印功能，但我遇到了一个问题，当我打印时，它正在打印，就好像它是移动的。我该如何做到这一点，以便有人打印时打印桌面版本？如何使打印使用桌面媒体查询？

$('.print-btn').click(function(e) { 
 
    window.print(); 
 
});

.visible-desktop { 
 
    display:none; 
 
} 
 

 
@media only screen and (min-width:768px) { 
 
    .visible-desktop { 
 
    display:block; 
 
    } 
 
    
 
    .visible-mobile { 
 
    display:none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="visible-desktop">Viewing from desktop</div> 
 
    <div class="visible-mobile">Viewing from mobile</div> 
 
</div> 
 

 
<a class="print-btn" href="#">Pring</a>

来源

2017-09-28 user13286

你可以在你的样式表的底部添加一个@media print规则：

@media print { 
    .visible-desktop { 
    display:block; 
    } 
    .visible-mobile { 
    display:none; 
    } 
}

来源

2017-09-28 14:59:55 Johannes

我宁愿不采取这种方法，因为我的实际实现包含比样本更多的内容。 – user13286

那么，然后尝试使用@media screen和（min-width：768px）{..'（不带'screen'）来避免该规则对屏幕的限制。 – Johannes

我试过每@abaks建议，但浏览器仍然继续打印移动版本，即使没有“屏幕”。 – user13286

only screen

这不包括打印。如果你想包括打印，不要写。

来源

2017-09-28 14:56:37 SLaks

我尝试删除'唯一屏幕和'部分，但它在打印时仍显示移动版本。 – user13286

你应该选择一个国家（可能是桌面），并使其成为“默认”，通过移动状态之外的媒体查询。

其他状态应覆盖媒体查询中的默认状态属性。

来源

2017-09-28 16:29:51 SLaks

如何使打印使用桌面媒体查询？

回答

相关问题