使用Html，CSS和JQuery自动调整离开板

Question

我必须在工作中开发自动缩放到达和离开板。

我开始时很容易创建一个基于百分比的列宽（并且整个表格宽度为100％）的表格。

现在，我有一小段JQuery让我改变文本的规模，但它只是为了证明这个概念。

我真的能够根据可用的屏幕宽度和高度自动缩放字体和表格单元格大小。我知道每个列单元允许的最大字符串长度，因此我可以根据某些计算自动设置em / px大小。

然而，我有点卡住了从哪里开始。我现在正在积极开发这个，但我最初的想法是：

scale = maxstringwidth_inpx / currentcellwidth_inpx

我通过在屏幕上显示查找表和字符1em大小的字体指标来计算maxstringwidth。

细胞都被分配了屏幕百分比，所以我应该能够直接读取它们。

然后我可以设置字体大小，即：

$("body").css("font-size", currentfontsize_px * scale);

这听起来是否可行？它还提出了关于每个单元格中每个字符串上方和下方填充的问题，但我确信我也可以在那里做类似的事情。

要符合我被困的地方：

1. 是否有这种例子 在野外的事情（我不能 找到任何）
2. 我的方法有吗？ 陷阱？
3. 你以前做过吗？ 并且可以分享智慧/技巧吗？
4. 我是否在脚下射击自己 已经并且应该考虑一个 不同的方法？

我已经提到过使用Flash作为自动缩放文本的方法，因为我们可以在ActionScript中执行很多字体指标。但是，我刚刚开始使用.NET Flash IDE，所以我只能将其作为开发平台。

感谢您提供任何提示，示例和建议！

西蒙

Answer 1

CSS和HTML在这类事情上可能非常挑剔，尤其是因为不同计算机上的字体大小可能会有很大不同。例如，如果你使用的是字体，比如Verdana。这是一种很常见的字体。不幸的是，Macs，Windows和Linux的呈现方式略有不同。除非应用程序将在严格控制的环境中使用，否则无法保证“漂亮”（非等宽）字体的宽度/高度。

我通常不支持使用Flash，但是，如果这是一个选项，它确实是保证某些东西看起来像预期的唯一方法，因为你可以嵌入字体，就像你提到的那样，有更多的控制在Flash中排版比在CSS中排版。您将在CSS和jQuery中进行一些非常繁重的开发以实现相同的效果 - 即使这样，您仍然会在浏览器和操作系统之间遇到困难。

但是，如果您决定在CSS / jQuery / HTML中执行此操作，请确保您在任何地方都使用ems - 没有像素。

祝你好运，让我们知道你最终决定做什么。

Answer 2

为避免在不同的操作系统/浏览器上出现任何不同字体大小的问题，您可以Calculate text width with Javascript确保开始扩展的基本大小正确无误。