React-pdf: ملف PDF متجاوب مع طبقة التعليقات التوضيحية

• [x] لقد قرأت الوثائق في README
• [x] لقد تحققت من نماذج ومجموعات الاختبار لمعرفة التنفيذ الأساسي للحياة الواقعية
• [x] لقد قمت بفحص ما إذا كان هذا السؤال قد تم طرحه بالفعل

ما الذي أحاول تحقيقه؟

أريد أن يتم تصغير مستند PDF مع تصغير حجم الشاشة بحيث يبدو كل شيء جيدًا على الهاتف المحمول ، مع الحفاظ على طبقة التعليقات التوضيحية للروابط القابلة للنقر.

صف الحلول التي جربتها

لدي نفس المشكلة تقريبًا مثل هذه المشكلة التي لم يتم حلها: https://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
• إصدار رد الفعل: ^ 16.13.1