基于宽度的文本缩放

-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

基于宽度的文本缩放

回答

相关问题