Html Question posted in
Some basic documentation can be found here.

Is it possible to change the src of a PDF link (a href tag) in HTML through a Media Query?

I am looking to support someone doing a web contest. They want to add a QR code in an email that links to a PDF hosted on a website. However they are looking to have two versions of a PDF hosted, such as if the person scanning the QR code with a tablet or larger device it will lead to a desktop version of the PDF, and if a person is using a phone to scan then it will lead to a mobile version of the PDF.

Both PDFs have same info, but my stakeholder is looking to show two pages first (side by side) on the desktop version and have one page start the mobile version.

I’m aware that QR codes are usually scanned with mobile so there isn’t much benefit to arrange a QR code for a desktop/tablet version, but I am curious whether a ‘s src can be changed according to the size of the screen you use to view this.

I’ve attempted to set a media query and a class where a content src attribute would be associated with the text but I think it broke the site.

Tags:

2

Answers


  1. 0

    As various commenters have pointed out, you seem to be using the terms “link” and “QR code” interchangeably. It is important to understand the difference.

    • A link is for digital documents like webpages and emails. It is typically one or more underlined words which a user can click or tap to visit the link destination, a URL. It is coded as an <a href> tag.
    • A QR code is for physical documents like books, signs or displays. It is a square two-dimensional barcode which can represent a URL. A user can scan the QR code with a camera-enabled mobile device to visit the URL.

    I am going to assume that because the context of your question is email, that you are asking about links rather than QR codes. (If this is indeed the case, please edit your post to remove all references to QR codes.)

    So, now to answer your question. The way I would solve this would be to have two <a href> tags with identical text but different classes and links, then use media queries to hide one and show the other.

    .link-desktop {display: none;}

@media (min-width: 750px) {
  .link-mobile {display: none;}
  .link-desktop {display: unset;}
}

<a class="link-mobile" href="mobile.pdf">click me</a>
<a class="link-desktop" href="desktop.pdf">click me</a>
    Login or Signup to reply.
  2. 0

    I would solve this problem by dynamically setting "src" attribute value with JavaScript based on window width. Just don’t forget to include <meta name="viewport" content="width=device-width, initial-scale=1.0" /> inside the <head> element for proper responsive behaviour.

    HTML:

    <!-- Embed PDF from default source into iframe -->
<iframe id="pdf-iframe" src="LARGE_SCREEN.pdf"></iframe>

    JavaScript:

    //Change source based on window width
function updatePDFSource() {
    const iframe = document.getElementById("pdf-iframe");
    if (window.innerWidth <= 600) {
      iframe.src = "SMALL_SCREEN.pdf";
    } else {
      iframe.src = "LARGE_SCREEN.pdf";
    }
  }

  window.addEventListener("resize", updatePDFSource);
  window.addEventListener("load", updatePDFSource);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search