移动和小屏幕的文本溢出问题答案

【问题标题】：Issue with text overflow for mobile and small screens移动和小屏幕的文本溢出问题
【发布时间】：2020-02-19 06:30:28
【问题描述】：

我正在尝试针对手机和小屏幕优化我的网站。该网站在任何 1920x1080 及以上分辨率下看起来都很完美。我正在使用引导程序，但我无法弄清楚我的代码有什么问题阻止了移动缩放工作。

似乎我的 background 没有缩放到文本 - 也就是说，这些似乎是完全静态的，文本可以溢出它们并堆叠到页面的其他部分。我想要将背景颜色（白色、灰色、深灰色）扩展到移动视图上的文本区域。

提前谢谢你。

【问题讨论】：

【解决方案1】：

在每个 div 上，您的身高和 %（百分比）。把这些都去掉，你的网站就可以了。

我还注意到轮播在加载图片时非常缓慢。如果您将每个压缩到大约 200k 或更少，它将加载更快并且仍然保持分辨率正常。

你有一个<meta name="viewport" content="width=device-width, initial-scale=0.5">

我建议将此发送至.8 或.9 或1

导航栏菜单不适应移动屏幕。检查下面的链接以了解 boostrap 导航菜单应该是什么样子，并按照示例创建一个

像这样的部分应该有相同数量的文本。因此，将中间部分缩短一点，但使所有部分与文本和行的数量相等（例如 3 行或 4 行文本），以便它们具有响应性。一种解决方法是为部分提供最小高度，但我不建议这样做

还有标题学习和解决问题的时间太长。您可以将其更改为学习

【讨论】：

如何删除高度和宽度属性的百分比？如果我通过像素定义它们，也会发生同样的问题。我已将导航栏调整为在移动设备上消失。
@Zaidra 你在我给出的答案（.music）中看到了吗（身高：75%）。把它拿出来。 Bootstrap 已经准备好响应。您将在 (mywork, myskills, about, footer) div 中看到这些高度。每个部分都有一些检查并取出高度。这就是搞砸的事情
@Zaidra 我已经在浏览器和移动设备上进行了测试。看起来非常好。导航菜单需要整理，因此使用引导程序中的建议使其响应。除了轮播图片加载速度很慢，所以尽量压缩图片，同时保持分辨率正常
@humble.rumble 我花了 20 秒才找到问题。他确实提供了一个网站
@humble.rumble 无需焦虑。我整天都在研究这个问题，直到晚上 10 点，我才在万不得已的时候，头疼得厉害，头脑也很疲倦。这是一个与引导程序有关的问题，我在代码中所做的一些事情是为了超越它的响应性——我对此一无所知。

【解决方案2】：

使用视口元标记，把它放在你的脑海里

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

对于字体大小，我更喜欢使用 vh(viewport height) & vw(viewport width) 来控制大小。这样大小将与设备视图成比例。

不过要小心。视口标签可能会导致高度渲染问题。为此，我使用 vh。

另外，如果页面要适合屏幕，最好在视口标签中使用“user-scalable=no”。但只有在您希望最终用户不放大和缩小时才这样做。

【讨论】：