基於寬度的文本縮放

-1

我使用在線轉換器將PDF轉換爲HTML。這裏有一個例子結果： http://www.ww2incolor.com/500px/e8efe9ed-37d4-45c4-bd12-178d9bac0947/e8efe9ed-37d4-45c4-bd12-178d9bac0947.html 基於寬度的文本縮放

它做的不錯，但是它有可能擴展到100％的寬度，使其移動友好？將圖像縮放至100％寬度非常容易，但文字似乎並不想縮放。我研究過字體縮放，但是弄亂了重要文本的位置。基本上圖像和文字都需要一起縮放。 transform：scale（X）做我希望它做的事情，但PDF的寬度可能會改變，所以它不是一個好的解決方案，除非您可以使其變爲動態。有人知道這是否可能嗎？

來源

2016-04-23 Procyon82

有圖書館，可以提供幫助的。例如：http：//simplefocus.com/flowtype/ –

您可以用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

來源

2016-04-23 19:01:02 lashtal

謝謝，這就是訣竅！根據我的理解，它只發生在負載上。因此，如果我以縱向模式查看手機中的某個頁面，然後將其旋轉至橫向，則需要重新加載該頁面才能正常工作。有沒有辦法呢？ – Procyon82

就像我說的，你需要處理窗口大小調整和orientationchange事件。我會更新我的原始答案。 – lashtal

非常感謝！ – Procyon82

與你的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)'; 
}

我希望我理解你。

來源

2016-04-23 18:55:28 user6245342

基於寬度的文本縮放

回答

相關問題