embed not working correctly for IOS devices ONLY

etaf · Dec 7, 2018

embed not working correctly for IOS devices ONLY
HI , I dont do much design work any more , years ago when i played with HTML etc

anyway , I often help out my Uncle who has a domain hosted by names.co.uk called

rotarypoetry.info

and that provides a yearly competition for children to enter poetry in to an annual competition.

I set this up ages ago , so all he had to do was copy the PDF over to the host and it would open the PDF direct from the URL

this has worked really well for a couple of years, However, we have added the Entry form and rules - which are two pages and noticed on IOS devices only, it only opens the First page of the PDF squashed.

I have checked on Chrome, firefox, safari, IE on various platforms

Windows 7 & 10
OSX
Andriod

All work correctly

IOS doesn't, it just shows 1 page squashed and not the 2nd page

the code in the index.html page is

<embed src="poetry.pdf" type="application/pdf" height="100%" width="100%"></embed>

I have also changed to the URL

<embed src="http//rotarypoetry.info/poetry.pdf" type="application/pdf" width="100%" height="100%"></embed>

and it still does not work

Enter

http//rotarypoetry.info/poetry.pdf
on the IOS device (iphone/ipad) . and it works, hence why I change the Source code above to
<embed src="http//rotarypoetry.info/poetry.pdf" type="application/pdf" width="100%" height="100%"></embed>
hoping the full URL link may help

any ideas

organicCPU · Dec 16, 2018

I guess iOS has a bug since version 9 (probably often called a feature), not being able to display embedded pdf files properly. Doesn't Android and other mobile devices suffer from similar features?

You could either 1.) do nothing and take it as a bug or 2.) serve the pdf as a download, if a browser like Safari for iOS is detected by a javascript or 3.) serve the pdf like you intended to on iOS with some additional javascript workarounds.

If you opted for solution 3.), you could use PDFObject in combination with PDF.JS.
For solution 2.), everything you need is PDFObject and the code of the new index.html should be something like this

Code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rotarypoetry</title>
    <style>
    p {
    font-size: 1.9em;
    padding: 1em;
    }
    </style>
  </head>
  <body>
    <script src="pdfobject.min.js"></script>
    <script>PDFObject.embed("poetry.pdf");</script>
  </body>
</html>

Download the minified version of PDFObject from the GitHub page and place pdfobject.min.js besides your pdf and index.html on the server.

As I wanted to keep it simple here, you could start to add fav(icons) or extend the code with PDF.JS. Hope that helps and the kids are now able to read your pdf on their iPhones.

Links:
https://pdfobject.com (for solution 2; also take a look at the code generator on that page)
http://mozilla.github.io/pdf.js/ (for solution 3)
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html

Mitthrawnuruodo · Dec 17, 2018

The embed tag's height and width shouldn't have % in them, only the number of pixels:

HTML:

<embed src="poetry.pdf" type="application/pdf" height="724" width="512">

If you want 100% width and height you may try to use style for that (disclaimer: I've not tested this):

HTML:

<embed src="poetry.pdf" type="application/pdf" style="height: 100%; width: 100%">

Edit: Testing in Safari for Mac, the style-tag doesn't seem to work, setting the height and width in pixels does.

Not sure this will fix your problem, but might be worth checking out...?

organicCPU · Dec 17, 2018

I do agree that <embed> elements width and height attributes with percent definitions are not allowed and must be set through CSS. Defining pixel would make the layout not scaling responsive anymore. To define it responsive, one could use:

Code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rotarypoetry</title>
    <style>
        html, body {
          margin: 0;
          padding: 0;
        }
        embed {
          width: 100vw;
          height: 100vh;
        }
    </style>
  </head>
 
  <body>
    <embed type="application/pdf" src="poetry.pdf">
  </body>
</html>

However, that doesn't solve the iOS and other mobile devices problem. Just tested it with iOS simulator. To solve it, the code of my previous post should work, that doesn't need the CSS definitions of this post.

etaf · Dec 18, 2018

thanks for all your suggestions
i'm going round tomorrow morning - so i will try some of these out
thanks again

Search

Search

embed not working correctly for IOS devices ONLY

etaf

macrumors member

organicCPU

macrumors 6502a

Mitthrawnuruodo

Moderator emeritus

organicCPU

macrumors 6502a

etaf

macrumors member

Our Staff