CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备：移动设备上的字体看起来很小

Posted 2023-03-31

【中文标题】CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备：移动设备上的字体看起来很小

【英文标题】：CSS / Bootstrap - font-size not properly resizing from computer to mobile device: Font on Mobile device looks so small

【发布时间】：2015-06-06 06:11:50

【问题描述】：

这是我的 CSS：

@media(max-width:767px)body  font-size: 22px; 
@media(min-width:768px)body  font-size: 20px; 
@media(min-width:992px)body  font-size: 16px; 

当我在笔记本电脑上调整浏览器窗口的大小时，它会正确调整大小。但这是我的问题：当我从移动设备访问我的网站时，字体大小太小（我不知道为什么，但我的移动设备上的 22px 太小了，我必须放大才能看到它正确）。当我将较小屏幕宽度的字体大小增加到 40 像素时，它在我的移动设备上看起来不错，但是当我从笔记本电脑去访问网站并将浏览器窗口调整为更小的宽度时，40 像素太大而结束占据整个屏幕。

我的移动设备上的 22px 看起来很小。有没有办法（使用 Bootstrap 或纯 CSS）来解决这个问题？问题，我的意思是，22px 太小了，但 40px 在我的移动设备上是完美的。然而，在我的电脑上却完全相反（22px 是完美的，但 40px 太大了）。

【问题讨论】：

您是否尝试设置viewport？ <meta name="viewport" content="width=device-width, initial-scale=1">（见developer.mozilla.org/en-US/docs/Mozilla/Mobile/…）

@kittykittybangbang 哦，亲爱的，原来我的生产代码没有设置视口。 （我什至用谷歌搜索并看到了关于 SO 的答案，其中提到了确保设置视口。当时，我认为我的生产代码有它，因为我的开发代码有它。在你的评论和原来我的生产代码没有设置视口-.-。无论如何，视口解决了这个问题，所以谢谢！

继续并添加为答案，以便可以“回答”这个问题。

【参考方案1】：

您是否尝试设置视口？

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

见https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics

【讨论】：

最常见的错误。我已经做了好几次了。