Problems displaying PDF in iFrame on Mobile Safari Problems displaying PDF in iFrame on Mobile Safari ios ios

Problems displaying PDF in iFrame on Mobile Safari


I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:

<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe><script>document.getElementById("theFrame").contentWindow.onload = function() {    this.document.getElementsByTagName("img")[0].style.width="100%";};</script>


My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.

.desktop-pdf {    display: none;}.mobile-pdf {    display: block;}@media only screen  and (min-width : 1025px) {  .mobile-pdf {      display: none;  }  .desktop-pdf {      display: block;  }}    <div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">        <div class="pdf">            <iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>            </iframe>            <iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">                <p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>            </iframe>        </div>    </div>