Как исправить css для печати с iphone

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

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

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

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

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

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

Обновлено: 3: я редактирую свою директиву, и теперь она также хорошо печатается на Mac с использованием инструментов разработчика в качестве сафари для адаптивного 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 изображение будет во всю ширину.