embed not working correctly for IOS devices ONLY

Discussion in 'Web Design and Development' started by etaf, Dec 7, 2018.

  1. etaf macrumors member

    etaf

    Joined:
    Apr 24, 2008
    Location:
    Surrey, UK
    #1
    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
     
  2. organicCPU macrumors 6502a

    organicCPU

    Joined:
    Aug 8, 2016
    #2
    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
     
  3. Mitthrawnuruodo, Dec 17, 2018
    Last edited: Dec 17, 2018

    Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #3
    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...?
     
  4. organicCPU macrumors 6502a

    organicCPU

    Joined:
    Aug 8, 2016
    #4
    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.
     
  5. etaf thread starter macrumors member

    etaf

    Joined:
    Apr 24, 2008
    Location:
    Surrey, UK
    #5
    thanks for all your suggestions
    i'm going round tomorrow morning - so i will try some of these out
    thanks again
     

Share This Page

4 December 7, 2018