基于宽度的文本缩放答案

【问题标题】：Text Scaling based on width基于宽度的文本缩放
【发布时间】：2016-08-17 07:43:01
【问题描述】：

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

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

【问题讨论】：

有一些库可以提供帮助。例如：simplefocus.com/flowtype

标签： javascript html css font-size

【解决方案1】：

你可以使用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】：

可能与 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)';
}

希望我能理解你。

【讨论】：