pdf in iframe only first page on iphone/ipad

Question

I am trying to display the content of a pdf with an iframe. Everything is working fine on a normal computer. However on mobile devices of apple (IPhone/IPad) only the first page of the pdf is getting displayed.

Here is my code where I already added some scrolling styles because I thought it was a problem related to the scrolling, but If I make the iframe very small it is possible to scroll! However the problem is still the same...only the first page is visible.

<div class="scroll-wrapper">
  <iframe height="260" width="280" src="info.pdf"> </iframe> 
</div>

.scroll-wrapper {
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  width: 400px;
  height: 300px;
}

Decathlon

and printing is broken too. if you debug the page, you will notice the pdf is not embeded as pdf, but as image. apparently this is broken since ios8 – Tetramethyldiarsine

For me below things worked may be it will work for you as well. #15481304 – Jahdai

Answer 1

Maybe you should try using viewport. Or using responsive breakpoints

@media screen and (max-width:512px) {
   size:
}

Lassie

Answer 2

@media screen and (max-width:512px) {
    .scroll-wrapper{
        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
        width: 400px;enter code here
        height: 300px;
    }
}

Devoted

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Muticous

Answer 3

<div class="scroll-wrapper">
    <iframe width="100%" height="100%" src="info.pdf"> </iframe> 
  </div>

    .scroll-wrapper {
        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
        width: 100%;
        height: 100vh;
    }

Maybe you can limit the width and height of the outer box, and the iframe just needs to be set to 100%. You can adjust the height of the outer box to adjust the size of the pdf box.

Fibrilliform

Answer 4

try this

iframe {
      width: 100% !important;
    }

Leeannaleeanne

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Baeda