在不同手机上的网站上使用相同的字体大小答案

【问题标题】：Same font size on a website on different phones在不同手机上的网站上使用相同的字体大小
【发布时间】：2016-04-29 23:26:38
【问题描述】：

我目前正在开发一个 wordpress 模板，我终于开始使它具有响应性，但是手机上的字体大小不同。例如，我拥有一台带有 Microsoft Edge 的诺基亚 Lumia，我页面上的文字很大。但是，在带有 Chrome 的三星 Galaxy S2 上，文本很小。我怎样才能让所有手机都显示大文本？

【问题讨论】：

用你的代码发布一个 jsfiddle，这样我们就可以看到发生了什么，我看到你正在使用 bootstrap，所以尝试指定你的字体大小 im em-s ，因为 bootstrap 设置了基本字体元素在所有平台上都很好:)
我主要使用 em，正如您在链接中看到的那样，我只在真正需要时才使用 px。我没有设置默认大小（以像素为单位）。我需要这样做才能解决这个问题吗？如果是，怎么做？
不，你不需要，bootstrap 会做所有的工作，如果你包含了它;)
您是否在标题中设置？

【解决方案1】：

您应该使用 em-s ，因为您使用的是引导程序，以及您的网站没有的另一件事，因为我可以看到代码是

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

这是响应式设计非常重要的标签尝试添加它:)

【讨论】：

您能解释一下为什么元标记对响应式设计很重要吗？
我为什么要 :) 你需要指示设备根据它的宽度采用站点，强烈建议放置它，这里有更多关于它的信息：webdesign.tutsplus.com/articles/…

【解决方案2】：

由于显示尺寸和分辨率的范围很广，因此通过相对单位来设置页面上任何对象的尺寸通常是最好的方法，即em、vw或vh。

绝对单位如px 或in 取决于设备的像素密度。因此，如果您有一个 250ppi 的显示器和另一个 150 ppi 的显示器，则在后一种情况下文本会更大。

【讨论】：

我主要使用 em，正如您在链接中看到的那样，我只在真正需要时才使用 px。我没有设置默认大小（以像素为单位）。我需要这样做才能解决这个问题吗？如果是，如何？
em 设置相对于父字体大小的大小。因此，如果您在具有绝对单位的父元素中定义字体大小，那么 em 也将依赖于绝对值......或者换句话说，它不会依赖于显示大小。如果我没记错的话，你在 body-tag 中将 font-size 设置为 14px。这可能是原因。
@treeno 如果你已经看到他的页面使用了 bootstrap，并且 bootstrap 为元素设置了基本字体，所以只需要在 em 中定义单位 :)
引导程序是否相对于显示大小执行此操作？