在 Safari 中将 PDF 缩放至 iframe/对象的宽度

Question

简短的问题是； “我可以 - 在 Safari 中 - 在 iPad 上（仅 - 不需要其他浏览器或设备） - 放大或缩小 PDF 文档以适合固定宽度的 iframe 或对象标签吗？”

还有一个很长的问题； 我有以下标记 - 用于在 DIV 中显示可滚动的 PDF。此标记将在 iPad 的 Cordova/Phonegap 应用程序中使用。 Javascript 智能是通过 Backbone 实现的；

<div class="pdf-container-outer">
    <div class="pdf-container">
        <iframe src="..." />
    </div>
</div>

以及相关的 CSS（为了可读性而删减）；

.pdf-container-outer {
    width: 800px; 
    height: 800px; 
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch; 
}

.pdf-container { 
    width: 800px; 
}

iframe { 
    width: 800px; 
}

PDF 文档本身为 A4 尺寸 - pdf 页面的像素尺寸为 595px X 841px。在 Safari 中 - 文档始终以“100%”显示 - 即，无论我在 iframe（或对象标记）上设置的宽度如何 - 结果都是相同的），显示的内部 PDF 始终只有 ~595px 宽（+大约两侧各有 7-8 像素的边距）。它们不能缩放。

iframe 宽度需要根据用户是否以纵向或横向模式查看网站而变化...横向约为 800 像素，纵向约为 520 像素。

鉴于我知道我正在显示的文档的页数 - 我确实知道显示所有文档所需的 iframe 的完整尺寸。因此，我尝试过的技术之一是使用一些内联样式设置 iframe 的大小，然后对其应用变换 - 将其放大，啦；

<iframe src="..." style="width: 610px; height: 14000px; -webkit-transform: scale(1.31); -webkit-transform-origin: top left;" />

即应用的变换将 610 像素放大 131% = 800 像素宽（横向模式）。纵向 - 比例因子约为 0.8。

这实际上在 iOS6 自带的 Safari 中工作得很好，但在 iOS5.1 中效果不太好 - 有一些我似乎无法解决的剪切问题 - 所以这个解决方案并不理想。

我确信我想得太多了——而且有一个更简单的解决方案。但在我的一生中，我无法让 PDF 在 Safari 的 iframe 中横向缩放...

帮助不大？

Answer 1

除了 CSS 之外，您还可以使用 JS 进行缩放，如下所示。

应用 CSS 以确保 iframe 占据其容器的整个宽度。

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

使用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>