Как исправить CSS для печати на iPhone

Question

Я использую угловую платформу 7 и компонент для создания слайдера фотографий.

В этом компоненте есть диапазон печати, при нажатии которого он использует window.print ().

на Mac и Windows егораспечатайте изображение на всю ширину, но на iPhone изображение маленькое внутри большого белого цвета (слева).

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

какие-либо предложения?

1. Я пытался использовать медиа-запросы, найденные в поиске.
2. также нашел директиву, которая лучше всего подходит для меня на Mac (Safari) и Windows (Edge / Chrome). Печать содержимого HTML .

Редактировать: 3: Я редактирую свою Директиву, и теперь она также хорошо печатается на Mac с использованием инструментов dev в качестве адаптивного iPhone-сафари, но на iPhone она все та же, только теперь добавлено еще 5 пустых страниц.

Директива:

import { HostBinding, Directive, AfterViewInit, OnDestroy } from @angular/core";

@Directive({
    selector: '[print-section]',
  })
  export class PrintSectionDirective implements AfterViewInit, OnDestroy {
    @HostBinding('class.print-section') private printSection = true;
    private style: HTMLStyleElement;

    public ngAfterViewInit() {
      this.style = document.createElement('style');
      this.style.type = 'text/css';
      this.style.innerText = `
      @page {
        size: A4;
        margin: 0;
      }
      @media print {
        body * {
            width:100% !important;
            height:100% !important;
            padding:0 !important;
            margin:0 !important;
            visibility: hidden;
        }
        html, body {
            width: 210mm;
            height: 297mm;
        }
        .print-section, .print-section * {
            width:100% !important;
            height:100% !important;
            padding:0 !important;
            margin:0 !important;
            right: 0;
            left: 0;
            visibility: visible;
            overflow-x:hidden;
        }
        img {
            width:100% !important;
            height:100% !important;
        }
      }`;

      document.head.appendChild(this.style);
    }

    public ngOnDestroy() {
      document.head.removeChild(this.style);
    }
  }

HTML:

<div id="myModal" class="modal" (keydown.ArrowLeft)="previous()" (keydown.ArrowRight)="next()">
    <span class="close" (click)="close()">×</span>
    <span class="print" (click)="print()">Print</span>
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-1 d-none d-md-block">
                <button id="right" (click)="next()"><</button>
            </div>
            <div class="col-md-10 col-12" print-section>
                <img class="modal-content" id="orderImage" [attr.src]="getUrl()">
            </div>
            <div class="col-md-1 d-none d-md-block">
                <button id="left" (click)="previous()">></button>
            </div>
        </div>
        <div class="row d-md-none">
            <div class="col-1"></div>
            <div class="col-2 width-100 text-right">
                <button id="right" class="m-1" (click)="next()"><</button>
            </div>
            <div class="col-6 width-100 text-center">
                <button id="print" class="m-1" (click)="print()">Print</button>
            </div>
            <div class="col-2 width-100 text-left">
                <button id="left" class="m-1" (click)="previous()">></button>
            </div>
        </div>
        <div class="row text-center">
            <div id="caption"></div>
        </div>
    </div>
</div>

Я ожидаю, что изображение будет полной ширины при печати на iPhone.

Answer 1

Хороший способ проверить стиль, специфичный для печати, - это удалить медиазапрос print, пока он не будет стилизован к вашим спецификациям в браузере, и применить его только к запросу на печатный носитель, когда он будет завершен.

В вашем случае при установке img на 100% ширины изображение занимает 100% ширины своего контейнера (за исключением некоторых менее распространенных случаев, когда используется нестатическое позиционирование и т. Д.).Я ожидаю, что img не охватывает 100% ширины, потому что классы, примененные к его родителю, не охватывают всю ширину.Для этих классов вам нужно будет создать специфичные для печати css (а также любые родительские элементы этой ограничительной ширины).