小编nik*_*iko的帖子

简短的问题是; "我可以 - 在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-8px的保证金).他们不放大.

iframe宽度需要根据用户是否以纵向或横向模式查看网站来改变...〜横向~800px和纵向~520px.

鉴于我知道我正在显示的文档中的页面数量 - 我知道显示所有文档所需的iframe的完整维度.所以我玩过的技巧之一就是用一些内联样式设置iframe的大小,然后对它应用变换 - 扩展它,a la;

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

即应用的变换将610px向上扩展131%= 800px宽(在横向模式下).纵向 - 比例因子约为0.8. …