with capturing the width of the printing screen with jQuery

Question

I have the following code:

HTML

<table style="width: 100%">
    <tr>
        <th>
            teste
        </th>
    </tr>
</table>

JQUERY

    // Imprime a página
    window.print();
    // Redireciona página
    window.location = 'link';

Good the problem I have and the following. When I printed on an A4 sheet the table occupies the whole screen correctly. But I put together a receipt and I want to print it on a non-tax printer, and it uses tape that ends 80mm, and the table is cut, as if it only prints half.

Good the solution I have in mount, and make jQuery capture the width of the print sheet and change the table css.

Can anyone do it? Or have some better solution?

Answer 1

Still can’t know print screen information on JS, so even you can’t capture the print screen width on jQuery.

Something you can do is use @media queries of CSS3 and make page changes according to the width/height of the print screen.

That might be enough.

(In min-width you must specify the sheet widths.)

/* semelhante à 90mm */
@media print and (min-width: 80mm) {
    table {
        width: 350px;
    }
}

/* ... */
@media print and (min-width: 121mm) {
    table {
        width: 450px;
    }
}

/* +A5, A4, ... */
@media print and (min-width: 152mm) {
    table {
        width: 100%;
    }
}

You can declare how many @media print want.