I have a pdf which i retrieve from the back-end and embed the application/pdf - content type onto the VF page in an iFrame but currently i am facing this issue where my iFrame is not scrollable. Currently i am unable to view the whole pdf file on the Salesforce 1 (mobile) platform inside the iframe as it is not scrollable but can view it on the desktop (web-browser) . Here is the code which i have written please suggest me how can i dynamically increase the height of the iFrame for responsive design on different devices.
**
<apex:page docType="html-5.0" standardController="ZInvoice__c" extensions="InvoicePDFController" sidebar="false">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<div id="ad" style="overflow:scroll !important ;-webkit-overflow-scrolling:touch !important;">
<iframe src="data:application/pdf;base64,{!file}" id="theFrame" width="100%" />
</div>
<script type="text/javascript">
var content_height = document.body.scrollHeight-80;
var iFrame = document.getElementById('theFrame');
iFrame.style.height = content_height+"px";
console.log(iFrame.style.height)
</script>
</apex:page>
**
How can i view the entire pdf content inside the iFrame on iPad or iPhone ast he same thing works on desktop version ?? My above code does not display the pdf neither is the iFrame scrollable to view the entire pdf content?
