Edit Question - KnowledgeHub

Title Body

The short question is; "Can I - in Safari - on iPad (exclusively - no need for other browsers or devices) - scale a PDF document up or down to fit a fixed-width iframe or object tag?" And the long question; I have the following markup - used to display a scrollable PDF within a DIV. This markup is to be used in a Cordova/Phonegap app for iPad. Javascript smarts are via Backbone; <div class="pdf-container-outer"> <div class="pdf-container"> <iframe src="..." /> </div> </div> And the associated CSS (cut down for readability); .pdf-container-outer { width: 800px; height: 800px; overflow: scroll !important; -webkit-overflow-scrolling: touch; } .pdf-container { width: 800px; } iframe { width: 800px; } The PDF documents themselves are A4 sized - and the pixel dimensions of a pdf page then work out to be 595px X 841px. In Safari - the documents are always displayed at '100%' - i.e. regardless of the width I set on the iframe (or object tag - the results are the same), the inner PDF that appears is always only ~595px wide (+ about a 7-8px margin either side). They do not zoom. The iframe width needs to change depending on whether or not the user is viewing the site in portrait or landscape mode... ~800px in landscape and ~520px in portrait. Given that I know the number of pages in the documents I'm displaying - I DO know the full dimension of an iframe required to show all of the document. So one of the techniques I have toyed with, is setting the size of the iframe with some inline styles, and then applying a transform to it - to scale it up, a la; <iframe src="..." style="width: 610px; height: 14000px; -webkit-transform: scale(1.31); -webkit-transform-origin: top left;" /> I.e. The applied transform scales 610px up by 131% = 800px wide (in landscape mode). In po

Tags (comma-separated) Cancel