Форсировать размер порта просмотра для макета печати с помощью загрузочной сетки

На моей странице представлена форма, которая разбивается с горизонтальной на вертикальную на @screen-tablet, которая составляет около ~ 760 пикселей. ширина страницы A4 составляет ~ 600 пикселей.

В моем print.css я сокращаю весь текст, например font-size:85%, чтобы весь размер шрифта 14 по умолчанию имел значение около 12. Я также хочу отобразить формат и это горизонтальное состояние, то есть - viewport > 760px. Проблема заключается в том, что макет печати устанавливает ширину страницы в формате A4 ~ 600 пикселей, в результате чего форма отображается вертикально.

Есть ли способ "обмануть" макет, считая его более 760 пикселей?

(Я надеюсь на ответ, который не требует установки всего нового макета для печати - просто заставляя его выглядеть так, как на рабочем столе).

Ответы

Ответ 1

Используйте свойство transform с запросом на медиа print, например:

@media print {
  html {
    transform: scale(0.8);
  }
}

Это позволит вам масштабировать документ без обновления содержимого.

CODEPEN Пример
transform Разработана функциональность

Ответ 2

Для этого вы можете использовать @media, за которым следует любой из этих

@media screen, @media print, @media screen, print

Определив состояние любого стиля во время рисования, вы можете определить каждое правило на @media screen, print, которое может работать для диапазона в документе.

Как вы хотите заморозить область просмотра до 700px, вы можете определить правило @media print для @media screen,print and (min-width<=760px) { body,html{ min-width:700px;max-width:700px; }}. которые определяют и устанавливают ваш видовой экран в определенную точку.

Примечание. Это правило также можно использовать для других работ, таких как transform и zoom в качестве аспекта.