[英]Text Scaling based on width
我使用在線轉換器將 PDF 轉換為 HTML。 這是一個示例結果: http : //www.ww2incolor.com/500px/e8efe9ed-37d4-45c4-bd12-178d9bac0947/e8efe9ed-37d4-45c4-bd12-178d9bac0947.html
它做得很好,但是否可以將其縮放到 100% 寬度以使其適合移動設備? 將圖像縮放到 100% 寬度非常容易,但文本似乎根本不想縮放。 我已經研究過字體縮放,但這弄亂了重要的文本位置。 本質上,圖像和文本都需要同步縮放。 transform: scale(X) 做我想要它做的事情,但 PDF 的寬度可以改變,所以它不是一個好的解決方案,除非你可以讓它動態。 有誰知道這是否可能?
也許在您的 PDF 容器中使用 ONRESIZE 事件:
<div id="PDFbox" onresize="DoScale();"></div>
function DoScale(){
// Get your new container dimensions...
var W=PDFbox.outerWidth;
var H=PDFbox.outerHeight;
// and then based on whatever logic you prefer, dynamically scale
whatever is neccessary...
AnotherID.style.transform='scale(2,2)';
}
我希望我能很好地理解你。
您可以使用 js 來縮放頁面,如下所示:
var page = document.querySelector('#pf1');
var getRatio = function(elem){
return document.body.offsetWidth / elem.offsetWidth;
};
page.style.transformOrigin = 'center top';
var applyZoom = function(){
page.style.transform = 'scale(' + getRatio(page) + ')';
}
在文檔就緒、調整大小和方向更改事件上調用它:
document.addEventListener('DOMContentLoaded', () => applyZoom());
window.addEventListener('resize', () => applyZoom());
window.addEventListener('orientationchange', () => applyZoom()); // probably not needed
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.