Question

我使用在线转换器将PDF转换为HTML。这是一个示例结果： http://www.ww2incolor.com/500px/e8efe9ed-37d4-45c4-bd12-178d9bac0947/e8efe9ed-37d4-45c4-bd12-178d9bac0947.html

它做得非常好，但它是否可以将其扩展到100％宽度以使其适合移动设备？将图像缩放到100％宽度非常简单，但文本似乎根本无法扩展。我已经研究过字体缩放，但这会弄乱文本的位置，这很重要。基本上，图像和文本都需要同时缩放。 transform：scale（X）做我想做的事情，但PDF的宽度可以改变，所以它不是一个好的解决方案，除非你能让它变得动态。有人知道这是否可能？

Answer 1

也许使用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)';
}

我希望我能理解你。

Answer 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

基于宽度的文本缩放

2 个答案: