8

簡単な質問は次のとおりです。「私は - Safari で - iPad で (排他的に - 他のブラウザやデバイスは必要ありません) - 固定幅の iframe またはオブジェクト タグに合わせて PDF ドキュメントを拡大または縮小できますか?」

そして長い質問です。次のマークアップがあります-DIV内にスクロール可能なPDFを表示するために使用されます。このマークアップは、iPad 用の Cordova/Phonegap アプリで使用されます。Javascript スマートはバックボーン経由です。

<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 の全サイズを知っています。私がいじったテクニックの 1 つは、いくつかのインライン スタイルで iframe のサイズを設定し、それに変換を適用することです。

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

つまり、適用された変換は、610px を 131% = 幅 800px 拡大します (横向きモード)。縦向き - 倍率は約 0.8 です。

これは、実際には iOS6 に付属する Safari では非常にうまく機能しますが、iOS5.1 ではそれほどうまく機能しません。回避できないように見えるクリッピングの問題があるため、この解決策は理想的ではありません。

私はそれを考えすぎていると確信しています - そしてもっと簡単な解決策があると確信しています。しかし、私の人生では、PDFをSafariのiframeで幅方向に拡大縮小することはできません...

少し助けて？

4

0 に答える 0