На отзывчивом сайте, при печати, какая точка останова применяется?
У меня есть отзывчивый сайт, на котором я пытаюсь реализовать запрос печатного издания.
При предварительном просмотре с помощью Chrome Devtools (Rendering tab > Emulate CSS media > Print)в тот момент он выглядел очень похожим на реальный веб-сайт, но с применением print css. Однако в предварительном просмотре печати (CTRL + P) все совершенно иначе.
Предварительный просмотр Devtools изменяется по мере изменения размера браузера, поэтому я не могу точно сказать, какая точка останова используется в реальном режиме предварительного просмотра.
- Вопрос заключается в том, какую ширину при печати использует браузер для создания снимка?
- Является ли эта ширина одинаковой во всех браузерах?
- Если нет фиксированной ширины, как мне это сделать?
1 ответ
Разные браузеры по-разному интерпретируют точки останова при стилизации для печати. Я только что открыл эту страницу с шириной 1000 пикселей в Firefox и Chrome, и при печати Firefox поддерживает левую боковую панель, а Chrome удаляет ее. И, как вы заметили, эмуляция печати не обязательно будет выглядеть как предварительный просмотр. Я обычно находил, что легче сделать эмуляцию правильной, чем фактическую печать.
Мои недавние выводы из работы над несколькими таблицами стилей печати:
- если вы хотите, чтобы стиль применялся в печати, и он находится внутри медиа-запроса точки останова, также поместите его в свой запрос медиа-контента.
- всегда проверяйте предварительный просмотр и проверяйте несколько браузеров.
Вероятно, будет все еще стиль, который нужно исправить после добавления стилей точек останова в запрос на печать, но это большой шаг вперед.