如何在移动设备html页面的表格单元格中设置相同的字体大小答案

【问题标题】：how to set equal font size in table cells for mobile device html pages如何在移动设备html页面的表格单元格中设置相同的字体大小
【发布时间】：2014-10-30 08:54:19
【问题描述】：

我遇到了移动设备上的字体渲染问题。我有一个固定为 800 像素的简单表格宽度，这是当今手机的常用尺寸。

我的单元格中的文本都使用相同的 html css 构成。第一行文字显示ok

但是下一行是一个问题，它被分成两个单元格。左边的单元格是一张图片，右边的单元格中有一些文字。我的问题是大多数移动网络浏览器会缩小该单元格中的字体大小。

对我来说，如果该文本只是分散在更多行上就可以了，但这种情况不会发生，它们倾向于保持与桌面浏览器视图中一样多的行。

我已经使用pt px设置了字体大小，并且在css文件中没有效果

.DefaultFont 
{
font-family: 'Merriweather Sans', Arial,verdena,sans-serif;
font-size: 13pt;
font-style: normal;
color:#4e0203;
font-weight: 400;
}

使用 13pt 13em 和其他方法等都没有用。

对于 html 元素使用 span 和 div 和 p 并在 td 元素中尝试过，但还是没有效果。

PS 我不是在寻找通过设备检测等来扩展页面客户端的 javascript 技巧。因为我只是使用 php 来确定它是桌面设备还是移动设备（这需要更少的代码来传输）。我只需要代码，这样字体就不会因移动网络浏览器而改变。

我如何阻止这些客户重新调整表的某些部分？

解决方案 最终效果非常好的解决方案是这里的多人组合。

以 % 为单位设置表格宽度
在 vw 中设置字体大小（像 % 一样也有 100 的索引），像 2 左右这样的低值。
注意 vw 不仅支持字体大小，还支持图像。
包括元标记，它甚至可以在上面没有它的情况下工作，但为了安全起见，我推荐它。

【问题讨论】：

你能用jsfiddle.net复制这个案例吗？
您是否尝试过设置 html 字体大小，然后设置其他元素的字体大小：1em;？
尝试对表格单元格使用基于百分比的值。

标签： android html css google-chrome firefox

【解决方案1】：

您是否尝试过 Meta 标签，以检查它是否有效...

 <meta name="viewport" content="width=device-width, initial-scale=1">

这意味着浏览器将（可能）以自己屏幕的宽度呈现页面的宽度。因此，如果该屏幕是 320 像素宽，浏览器窗口将是 320 像素宽，而不是缩小并显示 960 像素（或该设备默认执行的任何操作，以代替响应式元标记）。

看看，可能会有帮助..

【讨论】：

我现在快接近了，起初主表是固定的，上面的选项不适合移动设备，我现在正在使用 @LcSalazar 进行调整；整个网站。我必须删除其他格式的所有固定尺寸，但到目前为止我认为它是正确的。
因为答案是你和 LcSalazar 的结合，所以我投了他一票，因为你已经得到了 25 分，我真的需要这两个设计。感谢您的提示.. 哦，顺便说一句，将初始比例设置为 0.7 或 1.5 之类的东西会解决旧问题，初始比例 1 本身使我的表格在移动设备上变大，所以我现在将表格设置为 90%（对于还有一点背景）和 CSS vw 的字体大小，以及 vw 的图像，这些磁带一起很好地缩放到任何设备。大多数情况下使用 vw 或 % 都很好，有些不像 iframe 高度

【解决方案2】：

也许您应该为font-size 使用视口大小的排版单元。

当您想通过视口（元素容器）的宽度或高度来调整事物的大小时，可以使用它。或者两者兼而有之。可能的值是：

vh - 视口的高度
它的大小与容器的高度成比例。

font-size: 2vh;

vw - 视口的宽度
它的大小与容器的宽度成比例。

font-size: 2vw;

vmin - 视口的最小值
它的大小与 'vh' 和 'vw' 之间的较小者成比例。

 font-size: 2vmin;

vmax - 视口的最大值
它的大小与 'vh' 和 'vw' 之间的较大者成比例。

 font-size: 2vmax;

它肯定可以为您提供您想要的外观。只需找到当前的比例值，无论屏幕大小，它都适合！

W3 viewport relative length's docs

【讨论】：

对不起，我的回复迟了，我还没有 100% 工作（生病）。好吧，我不得不说这是一种缩放字体的好方法，它甚至支持表格宽度。相当不错。但是我仍然在表格的一个单元格中遇到问题，它看起来更小。通过手机查看网站时。我很想看到它使用这个 vmin 方法工作。
好吧，我不得不结合你在 CSS 中使用 vw 的提示。连同使用由 % 设置的表格宽度。 Percentage 和 vw 值都有 100 个比例，因此可以很好地协同工作。然后我还必须按照@Srinivas 的解释设置。结果非常棒，它的缩放是自动的，不需要编写脚本，只需要 CSS 和元标记。我想奖励您，因为这是一个非常好的提示，尽管最后我需要将所有提示组合在一起以使其按预期工作。你的小费使它超出了我的预期！
有点神奇，我注意到这个问题现在有 2500 次浏览（24-10-2017）

【解决方案3】：

我认为这应该可以解决问题

-webkit-text-size-adjust: none;

【讨论】：

我不确定这在不同的 webkits 之间是如何工作的，所以我没有测试它，也许它会很好并且它工作，我在这里基于其他人的建议解决方案，但我想说谢谢和我一起思考。

【解决方案4】：

您可以使用window.innerHeight。

【讨论】：