移动设备中的网站元素和字体太小

Posted 2023-03-06

【中文标题】移动设备中的网站元素和字体太小

【英文标题】：Website elements and fonts are too small in mobile devices

【发布时间】：2015-03-07 10:54:53

【问题描述】：

我刚刚完成了我的新项目的设计和编码。但我需要它在手机中正常工作。我将屏幕的大小调整为 350~400px 宽度，并开始编写代码并向其添加一些媒体查询。在重新尺寸的浏览器中看起来很棒。我删掉了一些元素和功能，一切都很好......直到我用我的智能手机测试它

屏幕不大。小于 4'（可能是 3.5）。我在代码中添加了一些警报，发现它的宽度是 980px。几乎是我在调整大小的浏览器上测试的 3 倍。

一切都太小了。其他方面都很棒：媒体查询正常工作，我在代码中进行的剪辑也可以，但你几乎看不到我手机中的内容。这当然不是我想要的。

我希望它看起来像一个应用程序，实际上它看起来像一个在重新调整尺寸的浏览器上的应用程序。

您如何创建响应式网站来处理此类问题？

我读到了一些关于使用 EM（还有一种叫做 REM 的新东西）单位的文章，但我仍然对此感到非常困惑。我是否必须将所有px 更改为em？

而且我知道您可以在html 或body 标签中设置font-size，所有其他元素都将从它们继承。这是一种方法吗？你平常都做什么？有什么技巧吗？我没有使用引导程序或任何其他前端框架。

【问题讨论】：

使用媒体查询将字体大小应用于您的正文是一个好方法。

你的意思是字体大小结合em单位？

为你的身体应用字体大小的百分比

但是其他元素的宽度和高度呢？

【参考方案1】：

您可以尝试添加viewport <meta> 标签：

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

Using the viewport meta tag to control layout on mobile browsers

【讨论】：

chrome 会理解视口吗？它在桌面浏览器中如何工作？他们会忽略它吗？

手机浏览器应该知道如何解读meta标签(w3schools.com/tags/tag_meta.asp)

我试过了，它奏效了。我只是在滚动时遇到了一些问题（在 x 轴上）

此解决方案使我的图像更加模糊。如果有一个解决方案可以保留没有此元标记的图像清晰度，那就太好了。

【参考方案2】：

使用媒体查询 (Link) 和百分比 (%)，16px（默认字体大小）= 100%。希望对你有帮助。

【讨论】：

html font-size:16px; 是事实上的标准，但不能保证是真实的，并且可以被用户样式表覆盖。