0

This question has been debated several times, so let me lay out the problem and see if I can get a clear and modern answer.

I have a file upload component, on a page, that will preview the file prior to ever sending it to the server. It supports multiple file types, including multiple image formats and pdf. I have 'alternative' views for certain scenarios, like 'tif' files can only natively be displayed in Safari.

My issue is embedding a PDF file. I have this working, no problem. Except in mobile. Mobile browsers don't support embedding PDF's.

So here's the core issue. I can display alternative text, with a download link. But I only want to do this in mobile browsers. I can't use media queries here, as this isn't really a screen size thing (and my core audience uses old, small desktop screens in clinic scenarios, which are about the size of a tablet in landscape mode).

I could use a UserAgent parsing approach, but these change, and browser support is shifting.

Then there's feature detection, but what works? Detecting touch support can be problematic.

So, what is the best approach for this scenario?

Steve -Cutter- Blades
  • 5,057
  • 2
  • 26
  • 40
  • 2
    On a server you can have no idea what type of device a request comes from. Anyone who claims otherwise is an absolute liar – Jaromanda X Jul 15 '22 at 12:05
  • `Mobile browsers don't support embedding PDF's.` I must be special. I can, and do, embed PDF on mobile with alarming frequency ...mozilla pdf.js – Jaromanda X Jul 15 '22 at 12:06
  • @JaromandaX I'm using the `data` attribute of the `` tag to embed the PDF. I've read good things about pdf.js, but I do not want to include extra libraries for this, preferring to use the browser native PDF viewers where available. From everything I have read, and local testing, no mobile browser ships with a native pdf viewer. – Steve -Cutter- Blades Jul 15 '22 at 12:50
  • @JaromandaX And I'm doing all of this client side. These files never hit the server til after submit. Hence my requirement for client side detection. – Steve -Cutter- Blades Jul 15 '22 at 12:52
  • Sorry. Misunderstood what request meant – Jaromanda X Jul 15 '22 at 13:07
  • As far as pdf.js goes. You'll need it for mobile browsers. Believe me. I know. There's no easier alternative. – Jaromanda X Jul 15 '22 at 13:08
  • The pdf.js library is nearly 4MB in size. Mobile viewing, in the browser, isn't worth the overhead. I'll let the user download the file to their device and view in a PDF viewer app, if they have one. – Steve -Cutter- Blades Jul 15 '22 at 13:12
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246466/discussion-between-jaromanda-x-and-steve-cutter-blades). – Jaromanda X Jul 15 '22 at 13:18
  • You must be looking at the wrong library. Mozilla pdf.js is 894kb. One fifth the size you claim – Jaromanda X Jul 15 '22 at 13:20

1 Answers1

0

  1. fastest method is using JavaScript and detect what size is screen (px).

  2. you could do something like How to detect the device is an Android

var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to detect if"
            + " the device is android phone.";

function GFG_Fun() {
    var res = "Device is not Android Phone";
    var userAgent = navigator.userAgent.toLowerCase();
    var Android = userAgent.indexOf("android") > -1;

    if(Android) {
        res = "Device is Android Phone";
    }
    el_down.innerHTML = res;
}
p#GFG_DOWN {
    color: green;
    font-size: 24px; 
    font-weight: bold;
}
p#GFG_UP {
    font-size: 19px; 
    font-weight: bold;
}
body {
    text-align: center;
}
h1 {
    color: green;
}
<body> 
      <h1>GeeksForGeeks</h1>
      <p id = "GFG_UP"></p>
      <button onclick = "GFG_Fun()">click here </button>
      <p id = "GFG_DOWN"></p>
</body>

Even so it is not 100% possible to detect if user uses android phone :D

Michael Štekrt
  • 406
  • 3
  • 8