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.
6 Replies
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 if you absolutely must render a pdf in the browser, i suggest you try to use pdf.js
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...
it's not a full answer, but it's close enough
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.
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
pdf.js isn't a plugin
and it is an option to render the pdf
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
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
you still have to do 90% of the detection in javascript
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
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)