React-pdf: 注釈レイヤー付きのレスポンシブPDF

• [x] READMEのドキュメントを読みました
• [x]サンプルスイートとテストスイートをチェックして、実際の基本的な実装を確認しました
• [x]この質問がまだ行われていないかどうかを確認しました

私は何を達成しようとしていますか？

クリック可能なリンクの注釈レイヤーを維持しながら、画面サイズが縮小するにつれてPDFドキュメントを縮小して、モバイルですべてが見栄えがするようにします。

私が試した解決策を説明してください

私はこの未解決の問題とほぼ同じ問題を抱えています： //github.com/wojtekmaj/react-pdf/issues/339 、私は彼の解決策と他のいくつかを試しましたが、役に立ちませんでした。 ドキュメントページを縮小することはできますが、注釈レイヤーがページに合わせて縮小されていません。

セットアップで機能するものが何も表示されません。アノテーションレイヤーもレスポンシブにするための何かが不足していますか？

私の現在のコード：
_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;
   }
  }

_記事の構成要素：_

 <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>

環境

• ブラウザ（該当する場合）[例：Chrome 57、Firefox 59]：Chrome 57
• React-PDFバージョン：^ 4.1.0
• Reactバージョン：^ 16.13.1