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

问题描述：

我在移动设备上进行字体呈现时遇到了问题。我有一个简单的表格宽度设置固定为800像素，通用尺寸为今天的手机。如何在移动设备html页面的表格单元格中设置相同的字体大小

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

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

对我来说，如果该文本只是分散在更多的线条上，但不会发生，它们往往会保留与桌面浏览器视图中相似的线条。

我设置使用PT像素并在CSS文件中像

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

没有影响使用13pt 13em等方法等没有什么工作的字体大小。

而对于使用span和div和p的html元素并在td元素中尝试它，但是再次没有效果。

PS我不是在寻找缩放页面客户端与设备检测等JavaScript技巧。因为我只是使用PHP来确定其桌面或移动设备（这需要传输更少的代码）。我只需要代码，以便字体不会因为移动Web浏览器而导致更改。

我该如何阻止这些客户端重新调整部分表格的大小？

解决方案 ，在这里工作非常好的是多人组合的最终解决方案。

集表格宽度在％
集的字体大小在VW（其中类似％也具有100指数），一个较低的值如2左右。
注意vw支持更多的只是字体大小，还有图像。
包括meta标签，它甚至没有在上面后工作，但要在安全的一面，我推荐它。

你能复制http://jsfiddle.net的情况吗？ – easwee 2014-09-09 22:23:08

你有没有尝试设置一个html字体大小，然后使其他元素font-size：1em;？ – Roi 2014-09-10 06:10:47

尝试将基于％的值用于表格单元格。 – designcise 2014-09-11 10:01:41

答

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

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

VH - 视口的高度
它proportionaly尺寸为容器的高度。

font-size: 2vh;

VW - 视口的宽度
它proportionaly尺寸为容器的宽度。

font-size: 2vw;

VMIN - 视口的最低
它proportionaly尺寸为 'VH' 和 '大众' 之间的小。

font-size: 2vmin;

VMAX - 视口的最大
它尺寸proportionaly到 'VH' 和 '大众' 之间大。

font-size: 2vmax;

它肯定会给你你想要的外观。只需找到当前的比例值，无论屏幕的大小如何，它都适合！

W3 viewport relative length's docs

对不起，我迟到了，我还没有工作100％（生病）。那么我得说这是缩放字体的好方法，它甚至支持表格宽度。相当不错。然而，我仍然在桌子的一个单元格中看到问题，它看起来更小。通过手机观看现场时。我很想看到它使用vmin方法工作。 – user613326 2014-09-18 13:09:24

好吧，我不得不结合你的提示在CSS中使用vw。配合使用由％设置的表格宽度。百分比和大众价值都有百分之一的规模，因此一起工作很好。然后，我还必须像@Srinivas所说的那样设置。结果在一起是真棒，其规模自动没有脚本只是CSS和元标记。我想奖励你，因为这是一个非常好的提示，尽管最后我需要将所有提示结合在一起，使其按预期工作。你的提示使它超出了我原本想要的超级！ – user613326 2014-09-18 17:43:57

有点令人惊异我注意到这个问题现在有2500意见（24-10-2017） – user613326 2017-10-24 21:43:39

答

你试过Meta标签，以检查它是否工作......

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

这意味着浏览器将（可能）渲染页面的宽度在自己的屏幕的宽度。因此，如果该屏幕宽度为320px，则浏览器窗口宽度将为320px，而不是缩小并显示960px（或默认情况下该设备所做的任何操作，以代替响应式元标记）。

退房，它可能有帮助..

我现在正在接近，起初主桌是固定的，与上面的选项它不适合在手机内，我现在用@LcSalazar调整这个;整个网站。我会去除其他格式的所有固定尺寸，但到目前为止它的走向是我认为的正确方式。 – user613326 2014-09-18 13:28:24

因为答案是你和LcSalazar的组合，我投票给他，因为你已经有了25分，我真的需要这两个设计。感谢您的提示..哦，顺便说一句，设置初始缩放比如0.7或1.5这样的老问题，初始缩放1本身使我的桌子在移动设备上变大，所以我现在将桌子设置为90％（用于也有点背景），CSS vw的字体大小以及vw的图像，这些磁带可以很好地扩展到任何设备。大多数情况下vw或％很好，有些不喜欢iframe的高度 – user613326 2014-09-18 17:56:15

答

我想这应该做的伎俩

-webkit-text-size-adjust: none;

我不确定这将如何在不同的webkit之间工作，所以我没有测试它可能会很好，它的工作原理，我基于其他人的建议在这里，但我想说感谢与我一起思考。 – user613326 2014-09-18 17:58:18

答

您可以使用window.innerHeight。

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

相关推荐