Question

问题摘要：我希望能够检测用户的打印机页面大小，以便根据打印机的页面大小发送不同的页面布局。

示例用例：我们的用户就是商家。有些用户想要打印基本收据（因此他们有小型打印机），有些用户想要打印发票（即普通的8“* 11”页）。根据打印机的页面大小，我们可以识别应该将哪种格式发送到打印机。

CSS规范：理想情况下，会有针对不同页面大小的CSS媒体设置。 CSS标准一直致力于此，并在CSS 2.1 spec it says

中

但是，在选择要打印的介质时，应使用CSS size属性提供的页面大小值来指导打印机。

CSS 3 spec appears to offer a good solution。

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page {
       margin: 3cm;
    }
 }

 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }

真实世界的实施：那么如何在主要浏览器中实现这一点。有没有人实现过这个？它可以使用哪些浏览器？什么代码实际上有效？

其他信息： It looks like this is working in a few browsers。这对页面大小有效，而不仅仅是横向/纵向。

@media print { @page {size: landscape } }

Answer 1

以下媒体查询对我来说已经可靠地使用了收据打印机：

@media print and (max-width: 10cm) { }

在一个有点相关的说明：不幸的是，这不起作用（客户必须手动将边距设置为无或最小）

@page { margin: 0; }

快乐编码

用CSS或JavaScript检测打印机的页面大小

1 个答案: