Обнаружение печатного размера страницы с помощью запросов в формате CSS

Question

Мое приложение генерирует печатные отчеты, создавая невидимый iframe, а затем печатает его. Мой последний в удручающе длинном списке проблем, которые я пытаюсь решить, - это оптимизация CSS для разных печатных размеров страниц. IE9 кажется, чтобы немного поработать (но имеет и другие проблемы, такие как игнорирование @page {margin: ...}), но не удача вообще в FF или Chrome.

Мой код выглядит следующим образом:

@media print and (width: 210mm) and (height: 297mm) { 
    ... stuff for A4 size ... 
} 

@media print and (width: 8.5in) and (height: 11in) { 
    ... stuff for US letter size ... 
} 

Ни одно из этих правил подкрепляются, когда-либо, в Chrome или FF. Я также пробовал ширину устройства и высоту устройства, и они тоже не работали (они, казалось, сообщали об абсолютных максимальных размерах принтера, а не о размере страницы). Я не могу понять, какое значение «ширина» и «высота» возвращаются, есть ли способ рассказать?

Есть ли надежный способ определения размера печатной страницы с использованием мультимедийных запросов? Я довольно близок к заключению, что есть просто no способ управлять печатью любым способом в браузерах и бросать в него полотенце.

Answer 1

Вы, кажется, делает много работы что-то вам не нужно делать много работы ... Попробуйте напечатать определенные области страницы, как это ...

Добавить эти классы в таблице стилей ...

<style media="screen"> 
    .noPrint{ display: block; } 
    .yesPrint{ display: block !important; } 
</style> 

<style media="print"> 
    .noPrint{ display: none; } 
    .yesPrint{ display: block !important; } 
</style> 

А затем положить классы, где они нужны. Точно так же, как совет ... только размещение класса .yesPrint не будет печатать области, которые вам нужны. Вам также нужно будет положить .noPrint в те области, которые вы не хотите печатать.

Я тестировал это на Chrome, IE10, IE9 и IE8, и он отлично работает.