Object Element in Responsive Design

Is there a way to ensure that the contents of an object/embed element, in this case that content being a pdf, is always rendered on all screen sizes?

The issue seems to be when an object/embed element is rendered on a mobile view/device, it doesn't render the pdf contents. if the view is set to "view in desktop mode" then the object contents renders properly.

I've already looked at my view port meta tags and ensured that the correct attributes are being set, and that the correct mime types are declared on the object attributes. could there be another way to ensure consent rendering across all screen sizes?

please let me know if any clarity or code snippets would help.

Ἔ

ἔρως•8/15/24, 6:41 PM

The issue seems to be when an object/embed element is rendered on a mobile view/device, it doesn't render the pdf contents.

that's nothing to do with screen size, but because the browser just doesn't have the capability to do it

Ἔ

ἔρως•8/15/24, 6:41 PM

if you absolutely must render a pdf in the browser, i suggest you try to use pdf.js

Ἔ

ἔρως•8/15/24, 6:45 PM

https://stackoverflow.com/questions/71306703/how-to-check-if-browser-has-pdf-viewer-or-not-in-javascript <-- by the way, this answers how to detect that there's a pdf viewer plugin

Stack Overflow

How to check if browser has pdf viewer or not in javascript

I need to check if the browser has ability to show pdf in iframe.
I was trying to simple check mimeTypes or plugins but now in Firefox on mac, it doesn't seem to be working fine, it shows empty arr...

Ἔ

ἔρως•8/15/24, 6:45 PM

it's not a full answer, but it's close enough

Ἔ

ἔρως•8/15/24, 6:45 PM

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/pdfViewerEnabled <-- and it points to this as a modern alternative

MDN Web Docs

Navigator: pdfViewerEnabled property - Web APIs | MDN

The pdfViewerEnabled read-only property of the Navigator interface indicates whether the browser supports inline display of PDF files when navigating to them.

skywizardOP•8/15/24, 6:56 PM

I can't use plugins, just whatever angular and TS provide me. this issue only arose when setting up mobile responsive views. it renders when on mobile when viewing in desktop mode via providing a download pdf option which is what I'm looking to achieve without needing the mobile browser to be set to desktop mode, so there's no need to display the actual pdf inline . I can't garuntee that my users will have pdf viewers on their phones.if this isn't possible then I could try to use some kind of fall back option instead

Ἔ

ἔρως•8/15/24, 6:57 PM

pdf.js isn't a plugin

Ἔ

ἔρως•8/15/24, 6:57 PM

and it is an option to render the pdf

Ἔ

ἔρως•8/15/24, 6:58 PM

you can have a fallback to download the pdf, but it is impossible to detect if the user has a pdf reader on the phone

Ἔ

ἔρως•8/15/24, 6:58 PM

and thank god it is impossible! imagine if all websites knew i have <insert popular game here> and used that to serve me tons of ads

Ἔ

ἔρως•8/15/24, 6:59 PM

you still have to do 90% of the detection in javascript

Ἔ

ἔρως•8/15/24, 7:00 PM

you can add content in an <ember> to download the pdf, which should display on the phone, but you can't detect if it is showing the pdf or not from css

Ἔ

ἔρως•8/15/24, 7:02 PM

if you have a big pdf, (5mb or more), you should just let the mobile user choose to download it (to do not waste too much bandwidth)