[email protected]
New Member
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;\[code\]<div class="pdf-container-outer"> <div class="pdf-container"> <iframe src="http://stackoverflow.com/questions/14597363/..." /> </div></div>\[/code\]And the associated CSS (cut down for readability);\[code\].pdf-container-outer { width: 800px; height: 800px; overflow: scroll !important; -webkit-overflow-scrolling: touch; }.pdf-container { width: 800px; }iframe { width: 800px; }\[/code\]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;\[code\]<iframe src="http://stackoverflow.com/questions/14597363/..." style="width: 610px; height: 14000px; -webkit-transform: scale(1.31); -webkit-transform-origin: top left;" />\[/code\]I.e. The applied transform scales 610px up by 131% = 800px wide (in landscape mode). In portrait - the scale factor is about 0.8.This actually works quite well in Safari that comes with iOS6, but not so great in iOS5.1 - there are clipping problems that I cannot seem to get around - and so the solution is not ideal.I'm sure that I'm overthinking it - and that there is a simpler solution. But for the life of me, I cannot get a PDF to scale width-wise in an iframe in Safari...Little help?