React-pdf: PDF responsif dengan lapisan Anotasi

• [x] Saya telah membaca dokumentasi di README
• [x] Saya telah memeriksa sampel dan suite pengujian untuk melihat implementasi dasar kehidupan nyata
• [x] Saya telah memeriksa apakah pertanyaan ini belum ditanyakan

Apa yang saya coba capai?

Saya ingin Dokumen PDF diperkecil saat ukuran layar diperkecil sehingga semuanya terlihat bagus di seluler, sambil tetap mempertahankan lapisan anotasi untuk tautan yang dapat diklik.

Jelaskan solusi yang sudah saya coba

Saya memiliki masalah yang hampir sama dengan masalah yang belum terselesaikan ini: https://github.com/wojtekmaj/react-pdf/issues/339 , Saya mencoba solusinya dan beberapa lainnya, tetapi tidak berhasil. Saya bisa membuat halaman dokumen diperkecil, tetapi lapisan anotasi tidak diperkecil dengan halaman.

Saya tidak melihat apa pun yang berfungsi dengan pengaturan saya, apakah saya melewatkan sesuatu untuk membuat lapisan anotasi juga responsif?

Kode saya saat ini:
_pdf.css:_

.react-pdf__Document {
   display: flex !important;
   justify-content: center !important;
}

.react-pdf__Page__canvas, .react-pdf__Page__annotations {
   max-width: 100% !important;
   height: auto !important;
}

.pdf-container {
   background-color: lightgray;
   padding: 1% 0 10px 0;
}

<strong i="22">@media</strong> screen and (min-width: 901px) and (max-width: 1600px) {
   .pdf-container {
      padding: 5% 0 10px 0;
   }
  }

  <strong i="23">@media</strong> screen and (min-width: 701px) and (max-width: 900px) {
   .pdf-container {
      padding: 10% 0 10px 0;
   }
  }

  <strong i="24">@media</strong> screen and (max-width: 700px) {
   .pdf-container {
      padding: 20% 0 10px 0;
   }
  }

_Komponen artikel:_

 <React.Fragment>
    <div className="pdf-container">
        <Document
            file={this.props.article.pdfUrl}
            onLoadSuccess={this.onDocumentLoadSuccess}
        >
            <Page pageNumber={pageNumber} />
        </Document>
        <Grid fluid className="s-padding-t">
            <Row center="xs">
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber <= 1}
                        onClick={this.previousPage}
                        >
                        <i className="fa fa-chevron-left"></i> Previous
                    </button>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <span>Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}</span>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber >= numPages}
                        onClick={this.nextPage}
                        >
                        Next <i className="fa fa-chevron-right"></i>
                    </button>
                </Col>
            </Row>
        </Grid>
    </div>
</React.Fragment>

Lingkungan

• Browser (jika ada) [mis. Chrome 57, Firefox 59]: Chrome 57
• Versi React-PDF: ^4.1.0
• Versi reaksi: ^16.13.1