медиа-запрос для печати в CSS печатает уменьшенную версию в Chrome 54

#javascript #html #css #google-chrome

#javascript #HTML #css #google-chrome

Вопрос:

Я использую @media print для создания некоторых надписей. После обновления Chrome 54 печать, похоже, выполняется в уменьшенной версии. Относительные размеры и расстояния между элементами остаются прежними; однако при печати изображение кажется уменьшенным. Отлично работает в Chrome 53. Есть идеи, почему это могло произойти?

1. У меня нет той же проблемы, что и у вас. Можете ли вы показать какой-нибудь код, чтобы я мог его протестировать? Вы также можете проверить caniuse.com также посмотрите, можете ли вы использовать эти свойства. Также ничто не говорит о том, что должна быть проблема с chrome. caniuse.com/#search=print

2. Не могли бы вы найти обходной путь для этого?

3. Из любопытства вы тестируете в среде служб терминалов? Я вижу проблемы с печатью Chrome 54 в службах терминалов.

4. Здесь та же проблема. Подтверждено, что он отлично работал в Chrome 53, а также что с использованием последней сборки Chromium (будущий Chrome 56) он продолжит работать так же, как работает сейчас.

5. Я только что добавил max-width: 100% и теперь работает нормально. это проблема начальной загрузки и ее интерпретация версиями Chrome.

Ответ №1:

Я столкнулся с этой ошибкой, потому что наше приложение использует фреймворк Bootstrap 3. Я обнаружил (на самом деле случайно), что если у вас есть DIV с классом контейнера bootstrap для переноса вашего содержимого (общий для страниц Bootstrap), эта ошибка будет вызвана. Простой обходной путь — заставить контейнер иметь ширину 100% при печати, добавив следующий стиль CSS после вашего bootstrap CSS.

 @media print {
   .container {width: 100%;}
}

Это решило проблему с размером печати, возникшую в Chrome 54 в нашем приложении.

Я также сообщил об этой ошибке команде Chrome, которая подтвердила это …https://bugs.chromium.org/p/chromium/issues/detail?id=660058

Ответ №2:

Это далеко не полное исправление, но оно заставило нас запустить наше приложение. Это корпоративные пользователи Chrome, печатающие документы и этикетки.

Предназначен только для Chrome с помощью взлома браузера.

 // Chrome 54  specific browser hack for printing
// http://browserhacks.com/#hack-ac2480b5c83038f2d838e2a62e28a307
@media print and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { body { zoom: 150%; } }