Scale PDF to width of iframe/object in Safari

Question

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 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?

Pitch

Answer 1

Along with CSS, you can scale using JS like below.

Apply CSS to ensure the iframe takes up the full width of its container.

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

Handle the scaling part using javascript

<script>
document.addEventListener("DOMContentLoaded", function() { // to ensure the DOM is fully loaded before resizing the iframe
    var iframe = document.getElementById('pdfIframe');
    
    function resizeIframe() {
        var containerWidth = iframe.parentElement.offsetWidth;
        iframe.style.width = containerWidth + 'px';
        iframe.style.height = (containerWidth * 1.5) + 'px'; // Adjust height as needed
    }

    // Initial resize
    resizeIframe();

    // Resize on window resize
    window.addEventListener('resize', resizeIframe);
});
</script>

Baseless